多個圖像元素在Jquery中徘徊時全部消失。

我遇到了將淡入淡出應用於具有相同ID的頁面上的一個元素的問題。多個圖像元素在Jquery中徘徊時全部消失。

首先我將圖像淡化到60％，然後懸停，我希望它只是100％的圖像。這部分工作，但它將效果應用到頁面上的每個元素。

// Fading images 
$(document).ready(function(){ 

$('.mainArticle img').fadeTo('slow', 0.6); 

$('.mainArticle img, .articleContainer').hover(function(){ 

    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 1.0); 
},function(){ 
    $(this).find('.mainArticle img, .articleContainer').stop(true,true).fadeTo("slow", 0.6); 
}); 
});

另外我知道這可以做，如果CSS但試圖儘可能兼容。

希望你們能幫助，

乾杯，

湯姆

來源

2011-09-13 Tom Kolodotschko

發佈你的'html'，你的'selector'可能比你想要的更多。 – Jack

你解決了你的問題嗎？我很好奇你是否看過我發佈的jsFiddles。 –

您是find()再次荷蘭國際集團相同的元素。 $(this)是懸停的元素，所以你可以用這個你懸停處理程序：

$('.mainArticle img, .articleContainer').hover(function(){ 
    $(this).stop(true,true).fadeTo("slow", 1.0); 
},function(){ 
    $(this).stop(true,true).fadeTo("slow", 0.6); 
});

不過，我想我明白你正在嘗試做的，並根據您的HTML（如果你可以發佈你的HTML它將是一個容易得多），你可能會想改變它的東西是這樣的：

$(function(){ 
    $('.mainArticle img').fadeTo('slow', 0.6); 

    $('.articleContainer').hover(function(){ 
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 1.0); 
    },function(){ 
    $(this).find('.mainArticle img').stop(true,true).fadeTo("slow", 0.6); 
    }); 
});

只有一個圖像褪色：jsFiddle

隨着多個圖像褪色：jsFiddle

來源

2011-09-13 13:46:39

太好了，謝謝你。關於多元素部分的任何線索？ –

如果'.mainArticle'元素位於'.articleContainer'中，您將得到意想不到的結果 –

'.articleContainer'可以被完全刪除。它也不在'.articleContainer'中。 –

如何使用$（this）而不是$（this）.find（'。mainArticle img，.articleContainer'）？

您正在選擇與該選擇器相匹配的每個元素，但由於您已經徘徊了一個元素，因此您可以使用$（this）並在其中執行更改。

來源

2011-09-13 13:47:20

害怕一個也不會，但速記是非常有用的。謝謝您的幫助。 –

多個圖像元素在Jquery中徘徊時全部消失。

回答

相關問題