翻轉效果

嗨我已經使用了一個我在網上找到的教程，以幫助我製作一個褪色圖像當用戶懸停在它上面..我試圖把標題放在這個圖像，但現在遇到了一個問題，意味着當用戶將鼠標懸停在在它上面的標題，圖像淡出再次..我真的想要得到它做的是整個事情淡入上懸停顏色..翻轉效果

這是JSFiddle http://jsfiddle.net/xxfairydragonxx/RpcRe/

如果有人能夠看到這樣做的方式，我將如此偉大！

這裏是我的代碼：

HTML

<div id="part2"> 
    <div class="fadehover"> 
    <div class="center"> 
     <h4>Independant Living</h4> 
    </div><a href="#"><img alt="" class="a" src= 
    "http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLiving.jpg"></a> 
    <img alt="Harmony Homes Transitions" class="b" src= 
    "http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLivingColor.jpg"></div> 
</div>

jQuery的

$(document).ready(function() { 
    $("img.a").hover(

    function() { 
     $(this).stop().animate({ 
      "opacity": "0" 
     }, "slow"); 
    }, 

    function() { 
     $(this).stop().animate({ 
      "opacity": "1" 
     }, "slow"); 
    }); 

});

來源

2014-02-06 Amber Sabre

最好的辦法是將標題到錨所以當你將鼠標懸停在該圖像淡入，或者您可以將懸停功能移至淡化類 – Huangism

您hover事件添加到整個.fadehover元（其中包含標題和圖像），然後使用淡入淡出將其定位在內部：

$(document).ready(function() { 
    $(".fadehover").hover(

    function() { 
     $('img.a',this).stop().animate({ 
      "opacity": "0" 
     }, "slow"); 
    }, 

    function() { 
     $('img.a',this).stop().animate({ 
      "opacity": "1" 
     }, "slow"); 
    }); 

});

您還需要清理你的HTML一點：

<div id="part2"> 
    <div class="fadehover"> 
     <div class="center"> 
      <h4>Independent Living</h4> 
     </div> 

     <a href="#"><img 
      src="http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLiving.jpg" 
       alt="" class="a"><img 
      src="http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLivingColor.jpg" 
       alt="Harmony Homes Transitions" class="b"></a> 
    </div> <!-- .fadehover --> 
</div> <!-- #part2 -->

http://jsfiddle.net/mblase75/eE5MC/

（或者，如果你是熱衷於學習語義HTML，使用figure and figcaption：http://jsfiddle.net/mblase75/eE5MC/1/）

來源

2014-02-06 14:39:05 Blazemonger

這幫助我加載謝謝！ –

如果我沒有理解清楚什麼正在嘗試做的：

您可以添加：

$(".center").hover(
function() { 
$('img.a').stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$('img.a').stop().animate({"opacity": "1"}, "slow"); 
});

DEMO

來源

2014-02-06 14:35:29 laaposto

由於您需要綁定2個元素而非1，因此效率低下 – Huangism

將懸停效果上fadecenter

$(document).ready(function(){ 
    $(".fadehover").hover(function() { 
     $(this).find('img.a').stop().animate({"opacity": "0"}, "slow"); 
    }, 
    function() { 
     $(this).find('img.a').stop().animate({"opacity": "1"}, "slow"); 
    }); 
});

http://jsfiddle.net/RpcRe/4/

來源

2014-02-06 14:38:33 Huangism

我認爲最好是把每個塊放在一個容器中而不是

而且具有容器觸發它

<div class="imgblock"> 
img_block_here 
</div>

... jQuery的

$(document).ready(function(){ 
$(".imgblock").hover(
function() { 
$("img.a").stop().animate({"opacity": "0"}, "slow"); 
}, 
function() { 
$("img.a").stop().animate({"opacity": "1"}, "slow"); 
}); 

});

請參閱更新的小提琴http://jsfiddle.net/RpcRe/2/

來源

2014-02-06 14:40:46 Onimusha

回答

相關問題