jquery - アコーディオンギャラリーは、mouseleave で最初の div に移動します

Question

私は画像ギャラリーの水平アコーディオンをやっています。マウスで入力すると、さまざまな画像が表示されます。ホバリングしていないときに最初の div に戻るには、mouseleave を追加するにはどうすればよいですか?

ありがとう

$(document).ready(function(){

activeItem = $("#accordion div:first");
$(activeItem).addClass('active');

$("#accordion div.bkgdImg").mouseenter(function(){
$('.tab-content').hide();
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "557px"}, {duration:300, queue:false});
activeItem = this;
});

$("#accordion div.bkgdImg").mouseleave(function() { 
$(this).tabs('select', '#accordion div:first');
});

});

Answer 1

後で使用するためにソリューションを表示するだけです：

表示したいdivにアクティブなクラスを再度追加しました。ホバーすると現在のdivが開き、離れると最初のdivがアクティブになります。

$(document).ready(function(){

activeItem = $("#accordion div:first");
$(activeItem).addClass('active');

$("#accordion div.bkgdImg").mouseenter(function(){
$('.tab-content').hide();
$(activeItem).animate({width: "50px"}, {duration:500, queue:false});
$(this).animate({width: "557px"}, {duration:500, queue:false});
activeItem = this;
});
$("#accordion div.bkgdImg").mouseleave(function(){
$(this).animate({width: "50px"}, {duration:500, queue:false});
activeItem = $("#accordion div:first");
$(activeItem).addClass('active');
$(activeItem).animate({width: "557px"}, {duration:500, queue:false});
});
$('.sub-tab-trigger').hover(function(){
$('.tab-content').hide();
$('#' + $(this).attr('data-ref')).show()
});         
});