翻转效果

嗨我已经使用了一个我在网上找到的教程，以帮助我制作一个褪色图像当用户悬停在它上面..我试图把标题放在这个图像，但现在遇到了一个问题，意味着当用户将鼠标悬停在在它上面的标题，图像淡出再次..我真的想要得到它做的是整个事情淡入上悬停颜色..翻转效果

这是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

回答

相关问题