Переключить ширину изображения

Question

Я пытаюсь создать веб-страницу с некоторым рисунком, на который вы можете нажать, а затем развернуть. Они также должны сокращаться после нажатия на второй раз. Я довольно новичок в JQuery, и проблема в том, что когда я нажимаю на изображение, оно исчезает.

Вот код

$(document).ready(function(){  
    $(".imgclass").click(function(){  
    $(this).toggle(function() 
     {$(this).animate({width: "400px"});}, 
     function() 
     {$(this).animate({width: "120px"}); 
}); 
}); 
}); 

Answer 1

Проверьте этот код, если вы ожидаете, то же самое. Просто вам нужно toggle классу

$(document).ready(function(){  
 
    $(".fotoklein").click(function(){  
 
    $(this).toggleClass('animate'); 
 
}); 
 
});

.fotoklein{ 
 
    width:100px; 
 
    height:100px; 
 
    background:#777; 
 
    color:#fff; 
 
    line-height:100px; 
 
    text-align:center; 
 
    -transition-duration:0.5s; 
 
    -webkit-transition-duration:0.5s; 
 
} 
 
.animate{ 
 
    width:400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fotoklein">Click me</div>

Answer 2

Если вы хотите применить тот же стиль для различных изображений изменить ID = «fotoklein» в класс = «fotoklein».

$(document).ready(function() { 
 
     var small={width: "120px",height: "120px"}; 
 
     var large={width: "400px",height: "400px"}; 
 
     var count=1; 
 
     $("#fotoklein").css(small).on('click',function() { 
 
      $(this).animate((count==1)?large:small); 
 
      count = 1-count; 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="fotoklein" class="small" src="https://pbs.twimg.com/profile_images/657703841085935616/EulXOwHD.png">

надеюсь, что это поможет ..

Answer 3

Вы недопонимание, что функция делает toggle(). jQuery's toggle() просто показывает и скрывает элементы. Вам нужно что-то вроде этого:

var big = false; 

$(".imgclass").click(function(){  

    if (big) { 
     $(this).animate({width: "120px"}); 
     big = false; 
    } else { 
     $(this).animate({width: "440px"}); 
     big = true; 
    } 

}); 

Однако, использование класса, подобного решению Hitesh Misro, еще лучше.

Answer 4

var flag = false; 
 

 
$('.foo').click(function() { 
 
    if($(this).hasClass('focus')) { 
 
     $(this).animate({width: '-=2em'}, 300).removeClass('focus'); 
 
     flag = false; 
 
    } 
 
    else { 
 
     if(!flag) { 
 
      $(this).animate({width: '+=2em'}, 300).addClass('focus'); 
 
      flag = true; 
 
     } 
 
    } 
 
});

.foo{ 
 
color: #FFF; 
 
cursor: pointer; 
 
background: #456; 
 
height: 2em; 
 
margin: .5em; 
 
width: 4em;  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="foo">Click</div> 
 
<div class="foo">Me</div>