سؤال

ها هي مشكلة بسيطة (ونأمل) على الأرجح:

لدي قائمة مع الصور مثل التنقل. عندما تحوم فوقهم ، تقوم JQuery بتحريك Div مع تعليق ويظهر ذلك. إنه يعاني من mouseout. (يعمل بشكل جيد)

عند النقر على الصورة ، فإن Caption Div يختلط بشكل أكبر ويتغذى على الصورة بشكل كامل (يعمل بشكل جيد). بينما تحوم على صورة أخرى في NAV ، فإن التسمية التوضيحية Div Aswell (تعمل بشكل جيد).

المشكلة: عند النقر فوق صورة التنقل الثانية ، يجب أن تشير الرسوم المتحركة للآخر (تم النقر فوقها).

ها هي jQuery:

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
$('.boxgrid.captionfull:not(.clicked)').live('mouseenter', function() {
    $(this).children('.cover').stop().animate({top: 130}, 350);
}).live('mouseleave', function() {
    $(this).children('.cover').stop().animate({top: 230}, 350);
})

وهنا رابط إلى موقع ديف

أي مساعدة مرحب بها ، شكرًا.

هل كانت مفيدة؟

المحلول

هذا يزيل clicked الفصل ويعززه إلى أسفل ويعيد العتامة إلى 0.7:

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $('.boxgrid.captionfull.clicked').removeClass('clicked').children('.cover').stop().animate({top: 230, opacity: 0.7}, 350);
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});

نصائح أخرى

أليس هذا مجرد حالة للعثور على أي عنصر آخر تم النقر عليه وإزالة فئة النقر؟

var thumbslide = $('.boxgrid.captionfull').click(function() {
   $('.boxgrid.captionfull.clicked').removeClass('clicked');
   $(this).toggleClass('clicked').children('.cover').stop().animate({top: 0, height:"230px", opacity: 1}, 350);
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top