jQuery slowdown removeClass

Question

私は画像をクリックすることができ、CSSクラスが適用されるこのjQuery関数があります。同じクラスの別の要素をクリックすると、前の要素の同じクラスが削除されます。 exampleimgopenクラスが適用される前に要素を2回クリックしなければならないことを除いて、正常に動作します。

私はエラーが関数内での順序と関係があると思いますが、何が間違っているのか分かりません。ここで

はjQueryのです：ここでは

jQuery(document).ready(function($) { 
    $('.exampleimg').click(function() { 
     $('.exampleimgopen').removeClass('exampleimgopen'); 
     $(this).toggleClass('exampleimgopen'); 
     $('.exampleimg').toggleClass('exampleimgclose'); 
    }); 
}); 

はhtmlです：ここでは

<div id="examples"> 
     <p>Examples:</p> 
     <img src="img/1.png" class="exampleimg"> 
     <img src="img/2.png" class="exampleimg"> 
     <img src="img/3.png" class="exampleimg"> 
     <img src="img/4.png" class="exampleimg"> 
     <img src="img/5.png" class="exampleimg"> 
     <img src="img/6.png" class="exampleimg"> 
    </div> 

は、CSSです：

#examples { 
    background-color:white; 
    color:black; 
    text-align:center; 
    padding:5px 5px 5px 5px; 
} 

.exampleimg { 
    padding:10px 0px 10px 0px; 
    width:300px; 
    margin:0 20px 0 20px; 
} 

.exampleimg:hover { 
    opacity:0.8; 
    cursor:pointer; 
} 

.exampleimgopen { 
    width:620px; 
    transition: 0.5s ease; 
} 

.exampleimgclose { 
    width:300px; 
    transition: 0.5s ease; 
} 

Answer 1

は、例えば、あなたがあなたのコードを簡素化することによって、問題を修正することができますイメージが閉じられたときにexampleimgcloseを追加する必要はありません（スタイルには幅とトランジションだけがあるので、実際には閉じていないと言われています）。その後、実際に開かれたときにイメージに追加するクラスを制御するだけで済みます。

これを参照してくださいJSFIDDLE私はあなたのために作った、私はJavaScriptコードの横に置かコメントを読む。また、以下の

関連するコード：

HTML：

<div id="examples"> 
    <p>Examples:</p> 
    <img src="http://placehold.it/620x100" class="example-img"> 
    <img src="http://placehold.it/620x100" class="example-img"> 
    <img src="http://placehold.it/620x100" class="example-img"> 
</div> 

CSS：

#examples { 
    background-color: white; 
    color: black; 
    text-align: center; 
    padding: 5px 5px 5px 5px; 
} 

.example-img { 
    padding: 10px 0px 10px 0px; 
    width: 300px; 
    margin: 0 20px 0 20px; 
    transition: 0.5s width ease; 
} 

.example-img:hover { 
    opacity: 0.8; 
    cursor: pointer; 
} 

.example-img-open { 
    width: 620px; 
} 

はJavaScript：

jQuery(document).ready(function($) { 
    $('.example-img').click(function() { 
    // When clicking an image which is already open, close it 
    if ($(this).hasClass("example-img-open")) { 
     $(this).removeClass("example-img-open"); 
    } 
    // When clicking an image which is not yet open, open it and close all previously opened 
    else { 
     $('.example-img').removeClass("example-img-open"); // Closes all others 
     $(this).addClass("example-img-open"); 
    } 
    }); 
}); 

また、私は別の名前を使用していることに気づいたかもしれませんt彼はクラスです。以前のコードを読むのが難しいため、これを行いました。必要に応じて変更することができます。

乾杯。

Answer 2

これは実際にはかなり簡単です。

CSS .exampleimgの内部にトランジション幅を使用してください。あなたのimg要素に余分なクラスは必要ありません。

ので、同じように：今

.exampleimg { 
    padding:10px 0px 10px 0px; 
    width:300px; 
    margin:0 20px 0 20px; 
    transition: width 500ms; // substitute 500ms for whatever you require 
} 

、このように見えるように、すべてのHTMLimg要素を編集します。

<img src="img/1.png" class="exampleimg" onClick="enlarge();"> <!-- notice onclick event !--> 

あなたは今の線に沿って少し行くべきjQueryのですof：

function enlarge(){ 
    if(!$(this).hasClass('exampleimgopen')){ // if clicked image isn't enlarged 
     $('.exampleimg').removeClass('exampleimgopen'); // make all other image smaller 
     $(this).addClass('exampleimgopen'); // make this image larger 
    } else { // if image is enlarged 
     $(this).removeClass('exampleimgopen'); // make the image smaller 
    } 
} 

これは役に立ちます。

ユーザーが画像をクリックすると、画像を拡大して、選択した他の画像を小さくする必要があります。すでに拡大した画像をクリックすると、再び小さくなります。

それだけでなく、それらはすべて500ミリ秒で容易になるはずです。

Answer 3

あなたが近くにいるthis fiddle

をチェックアウト - それはクラスはかなり右削除/追加されていないことだけです。ここで

は（フィドルから）働くそれを行うための一つの方法

jQuery(document).ready(function($) { 
    $('.exampleimg').click(function() { 
     $('.exampleimg').removeClass('exampleimgopen exampleimgclose'); 
     $(this).addClass('exampleimgopen'); 
     $('.exampleimg').not(this).addClass('exampleimgclose'); 
    }); 
}); 

Answer 4

clickハンドラメソッドでは、すべてのimg.exampleimg要素から開いているクラスを削除するだけです。すべてのimg.exampleimg要素にcloseクラスを追加し、現在クリックされている要素とは正反対です。

jQuery(document).ready(function($) { 
    $('.exampleimg').click(function() { 
     $('.exampleimg').removeClass('exampleimgopen').addClass('exampleimgclose');  
     $(this).addClass('exampleimgopen').removeClass('exampleimgclose') 
    }); 
});