jquery - الماوس فوق -> تتلاشى في / خارج / / انقر فوق -> العتامة 100٪ // انقر فوق -> العتامة 60
سؤال
أنا أعمل على موقع على شبكة الإنترنت مع مسج ومبهجة.
عند تحميل الصفحة، يجب أن تكون جميع الصور المصغرة في 60٪ من العتامة. بمجرد أن تذهب مع الماوس فوق الإبهام، يجب أن تتلاشى إلى 100٪، إذا انتقلت مع الماوس الخاص بك، يحتاج الصورة المصغرة إلى التلاشي مرة أخرى على 60٪ من العتامة.
عند النقر فوق المستخدم على صورة مصغرة، يجب أن تبقى في 100٪ من العتامة. بمجرد النقر فوق المستخدم على صورة مصغرة أخرى يجب أن تتلاشى المصغرة "القديمة" مرة أخرى إلى 60٪ و "جديد" يجب أن يبقى المرء عند 100٪. (يحتوي بالفعل على عتامة 100٪ لأنك تذهب مع الماوس الخاص بك عليها).
هذا هو الرمز الذي لدي حتى الآن:
$(window).bind("load", function() {
$("#mycarousel li").fadeTo(1, 0.6);
$("#mycarousel li").hover(function(){
$(this).fadeTo(350, 1.0);
$(this).addClass('Active');
},function(){
$("this:not('.Active')").fadeTo(350, 0.6);
});
});
سيكون موضع تقدير أي مساعدة.
greatings، bas.
المحلول
$(window).bind("load", function() {
var activeOpacity = 1.0,
inactiveOpacity = 0.6,
fadeTime = 350,
clickedClass = "selected",
thumbs = "#mycarousel li";
$(thumbs).fadeTo(1, inactiveOpacity);
$(thumbs).hover(
function(){
$(this).fadeTo(fadeTime, activeOpacity);
},
function(){
// Only fade out if the user hasn't clicked the thumb
if(!$(this).hasClass(clickedClass)) {
$(this).fadeTo(fadeTime, inactiveOpacity);
}
});
$(thumbs).click(function() {
// Remove selected class from any elements other than this
var previous = $(thumbs + '.' + clickedClass).eq();
var clicked = $(this);
if(clicked !== previous) {
previous.removeClass(clickedClass);
}
clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
});
});
لا تنتمي إلى StackOverflow