画像の幅を切り替える

Question

画像をクリックしてウェブページを作成しようとしています。彼らはまた、2回目にクリックした後に収縮する必要があります。私はかなりJqueryに新しいですし、問題は画像をクリックすると消えてしまうことです。ここで

あなたが同じことを期待している場合、コード

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

Answer 1

は、このコードをチェックしています。ちょうどあなたは、あなたが別のイメージに同じスタイルを適用したい場合は、クラス=「fotoklein」にID =「fotoklein」を変更

$(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

クラスをtoggleする必要があります。

$(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">

あなたはtoggle()機能が何を誤解している

Answer 3

。これはあなたを助けることを願っています。 jQuery's toggle()は要素を表示したり隠すだけです。 Hitesh Misroのソリューションは、より良いですのようにクラスを使用して、しかし

var big = false; 

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

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

}); 

：あなたはこのようなものが必要。

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>