2012-10-12 173 views
1

在我的畫廊中,Div通過循環生成。在那裏,我想給小型(單人)Div的懸停效果。在我的代碼中,當我將整個div展示的peticular div效果展開時。單個div的jquery懸停功能

mycode的

.spanstyle{opacity:1;} 

while (loop){ 
<div class="waz"> 
<span class="spanstyle"></span> 

</div> 
} 

$(".waz .spanstyle").each(function(i, val) { 
    $(this).mouseenter(function() { 
     $(this).stop().animate({ opacity: 1 }, 300); 
    }) 
    $(this).mouseleave(function() { 
     $(this).stop().animate({ opacity: .3 }, 100); 
    }) 
}); 

更多的細節,你可以檢查項目: Project

+2

ID必須是唯一!!!!! – Bazzz

+0

編輯的問題,謝謝 – Wazan

+0

你有這個事件附加到spanstyle,而不是waz – karaxuna

回答

2

嘗試這一個,並檢查該fiddle可以幫助你

$(".waz").each(function(i, val) { 
    $(this).mouseenter(function() { 
     $('.spanstyle',this).show(); 
    }) 
    $(this).mouseleave(function() { 
     $('.spanstyle',this).hide(); 
    }) 
}); 
+0

謝謝@rajesh – Wazan

1

那是因爲你給同一個ID的所有的div。嘗試給他們不同的ID的

var i=0; 
while (loop){ 
<div id="'waz' + i"></div> 
i++; 
} 

$("#waz .spanstyle").each(...

將成爲

$("div[id='^waz'] .spanstyle").each(... 
1

你有相同ID的多個元素。我建議是這樣的:

while (loop){ 
    <div onmouseover="a" onmouseout="b"></div> 
} 

function a(){ 
    $(this).find('.spanstyle').stop().animate({ opacity: 1 }, 300); 
} 

function b(){ 
    $(this).find('.spanstyle').stop().animate({ opacity: .3 }, 100); 
} 

編輯:

或者,你可以做你的代碼中的一些小變化:

$(".waz").each(function(i, val) { 
    $(this).mouseenter(function() { 
     $(this).children('.spanstyle').stop().animate({ opacity: 1 }, 300); 
    }) 
    $(this).mouseleave(function() { 
     $(this).children('.spanstyle').stop().animate({ opacity: .3 }, 100); 
    }) 
}); 
+0

這對我沒有用.. – Wazan

+0

@Wazan回覆編輯 – karaxuna

1

似乎有在HTML頁面中一些衝突。 WAZ是一些div的類名,有些是它的ID(id在文檔中應該是唯一的)。我認爲懸停效果從下面的代碼(在你的頁面提供)來:

$(".waz").hover(function(){ 
    $(".spanstyle").slideToggle(); 
}); 

不是從你的問題部分發布的代碼。請看看這些東西。

+0

好趕,謝謝...我fogot刪除!但仍有問題:( – Wazan