如何通过JQuery实现淡入淡出？

我试图让一个跨度出现在mouseOver或悬停在JQuery中。我想要发生的是，当我将鼠标悬停在box1上时，应该会出现"sale"。它不工作，有人可以帮忙吗？如何通过JQuery实现淡入淡出？

HTML：

<div id="columnOne"> 
     <span id="sale">for sale</span> 

     <div id="box1"></div> 

     <div id="box2"></div> 
    </div>

CSS：

#sale{width: 85px; 
    margin: 0 0 -45px 15px; 
    padding: 5px; 
    position: relative; 
    display: none; 
    font-size: 14pt; 
    font-family: 'oxygen', serif; 
    background-color: #000; 
    color: #fff; 
    text-transform: uppercase; 

    -webkit-border-radius: 5px 5px; 
    -moz-border-radius: 5px 5px; 
    border-radius: 5px 5px;} 

#box1{width: 240px; 
    height: 220px; 
    margin: 10px; 
    position: relative; 
    display: block; 
    background-color: #4174a8; 
    background-image: url(../images/crown.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    z-index: -1;}

JQuery的：

$(document).ready(function(){ 
    $('#boxt1').hover(function(){ 
     $('#sale').mouseOver('fast'); 
    }); 

});

来源

2013-09-24 justLearning

你尝试过使用'fadeIn'，你不是在任何地方调用它？ 'mouseOver'是设置一个事件处理程序，它不接受''fast''的参数。 – Matthew

我做了，只是更新了JSFiddle。仍然不起作用。 – justLearning

你有几个问题：

您没有使用fadeIn，而是使用mouseOver这是一个事件。
您的选择不正确。
对于box1，您有一个负z-索引，因此您永远无法将它悬停在上面，因为它的父项具有更高的z-index，因此您最终将其悬停。
另外请注意，默认情况下div是一个块级元素，所以它将占用容器的全部宽度，所以即使你去到div的右侧，它仍然在div上，所以你的mouseleave不会被触发。你可以改为float /使之成为inline-block的div，使其只取指定的尺寸。

尝试

$(document).ready(function() { 
    $('#columnOne').hover(function() { 
     $('#sale').fadeToggle('fast'); 
    }); 

});

Fiddle

来源

2013-09-24 00:30:09 PSL

谢谢......我相信这会起作用。 – justLearning

你在你的jQuery $（ '＃BOX1'），这可能会导致问题的目标$（ '＃boxt1'），而是和我不确定你为什么触发鼠标悬停事件。这应该工作：

$(document).ready(function(){ 
    $('#box1').hover(
     function(){ 
      $('#sale').stop().fadeIn(); 
     }, 
     function(){ 
      $('#sale').stop().fadeOut(); 
     } 
    ); 
});

来源

2013-09-24 00:32:01

如何通过JQuery实现淡入淡出？

回答

相关问题