淡入淡出与jquery

我想打开一个div时，悬停在一个标签。我可以用CSS来完成，但是我想申请淡入淡出到该div。我做不到。淡入淡出与jquery

<a href="#"> 
    <img src="img/detayaltresim1.jpg" alt=""> 
    <div></div> 
</a> 


div{ 
    position: absolute; 
    width: 200px; 
    height: 80px; 
    background: #000; 
    bottom: 46px; 
    left: -78px; 
    z-index: 2; 
    display:block; 
} 
a{ 
    display: block; 
    position: relative; 
} 
a:hover div { 
    display:block; 
}

和我的标签有父母。我不能用j查询来做到这一点。为什么？

<script> 
      $('urundetayisagteknik2 a').mouseover(function(){ 
      //show the box 
      $(this).children('.urundetayisagteknik2 a div').stop().animate({opacity:1},300); 
      }); 

      $('urundetayisagteknik2 a').mouseleave(function(){ 
      //hide the box 
      $(this).children('.urundetayisagteknik2 a div').stop().animate({opacity:0},500); 
      }); 
</script>

来源

2014-02-12 user3226744

提供jsfiddle .. – Sionnach733

你的目标是'$（'urundetayisagteknik2 a'）'错误。应该是'$（'。urundetayisagteknik2 a'）'。或者这是一个错误的问题？ – Niklas

请提供完整的html，其中是'urundetayisagteknik2'元素 –

你的班级名称在jquery没有.可能是这样的错误。编辑，像

$('.urundetayisagteknik2 a').mouseover(function(){ 
    //show the box 
    $(this).children('.urundetayisagteknik2 a div').stop().animate({opacity:1},300); 
});

OR，你可以试试下面的一个

CSS

<style> 
div{ 
    position: absolute; 
    width: 200px; 
    height: 80px; 
    background: #000; 
    top: 46px; 
    left: 20px; 
    z-index: 2; 
    display:none; 
} 
a{ 
    display: block; 
    position: relative; 
} 
</style>

HTML

<a class="link" href="#"> 
    Link 
    <div></div> 
</a>

JQuery的

<script> 
$('.link').mouseover(function(){ 
    $('.link div').fadeIn(); 
}); 

$('.link').mouseleave(function(){ 
    $('.link div').fadeOut(); 
}); 
</script>

来源

2014-02-12 10:51:02

这里是通过jQuery的溶液中。

HTML。

<a href="#"> 
    This is a anchor tag 
    <div class="dropDown">hidden div</div> 
</a>

CSS

.dropDown { display:none;}

jQuery的

$('a').mouseover(function(){ 
    $(this).find('.dropDown').fadeIn(); 
}).mouseleave(function(){ 
    $(this).find('.dropDown').fadeOut(); 
});

Demo

来源

2014-02-12 10:52:48

像这样

demo

CSS

#test { 
    margin: 1.5em auto; 
    width: 10em; 
    height: 10em; 
    background: gray; 
}

var test = $('#test'), 
    $in = $('#in'), 
    out = $('#out'), 
    toggle = $('#toggle'), 
    to = $('#to'); 


$in.click(function() { 
    test.fadeIn(1000, function() { 
     alert('Complete'); 
    }); 
}); 


out.click(function() { 
    test.fadeOut(1000, function() { 
     alert('Complete'); 
    }); 
}); 


toggle.click(function() { 
    test.fadeToggle(1000, function() { 
     alert('Complete'); 
    }); 
}); 

to.click(function() { 
    test.fadeTo(1000, 0.5, function() { 
     alert('Complete'); 
    }); 
});

来源

2014-02-12 10:54:00 falguni

试试这个：

var a = $('.urundetayisagteknik2 a'); 
var div = a.find('div'); 

a.on({ 
    mouseover: function() { 
     div.stop().animate({ 
      opacity: 1 
     }, 300); 
    }, 
    mouseleave: function() { 
     div.stop().animate({ 
      opacity: 0 
     }, 300); 
    } 
});

来源

2014-02-12 10:58:16 ducdhm

刚刚尝试下面的脚本

 $(".urundetayisagteknik2 a").hover(function() { 
       $(this).find("div").stop(true, true).fadeIn(); 
     }, function() { 
       $(this).find("div").stop(true, true).fadeOut(); 
     });

jQuery的悬停（）函数可以用于此目的。第一个函数在mouseenter被触发时调用，第二个函数在mouseleave被触发时调用。请参阅API。

来源

2014-02-12 10:58:43 sanjeev

淡入淡出与jquery

回答

相关问题