[英]jQuery hover fade p tag out and fade another in
So I am having a problem getting this to work. 所以我在使它起作用方面遇到问题。 I have 3 modules with id's #mod1, #mod2, #mod3. 我有3个ID为#mod1,#mod2,#mod3的模块。 When you hover over these I want them to fade out the visible P tag and fade in another. 当您将鼠标悬停在这些标签上时,我希望它们淡出可见的P标签,然后淡入另一个标签。
<ul id="homeModules">
<li id="mod1"><a href="/portfolio/">VIEW OUR GALLERY</a></li>
<li id="mod2"><a href="/about/">MEET SARAH</a></li>
<li id="mod3"><a href="/become-a-client/">BECOME A CLIENT</a></li>
</ul>
<p class="homeTags" id="homeTag1">Lorem ipsum dolor sit amet.</p>
<p class="homeTags" id="homeTag2">The Google Fonts API will.</p>
<p class="homeTags" id="homeTag3">Check out more advanced techniques.</p>
#homeTag2, #homeTag3 {
display: none;
}
$('#mod1').hover(function(){
$('#homeTag2,#homeTag3').fadeOut(250);
setTimeout(function(){
$('#homeTag1').fadeIn(250);
}, 500);
});
$('#mod2').hover(function(){
$('#homeTag1,#homeTag3').fadeOut(250);
setTimeout(function(){
$('#homeTag2').fadeIn(250);
}, 500);
});
$('#mod3').hover(function(){
$('#homeTag1,#homeTag2').fadeOut(250);
setTimeout(function(){
$('#homeTag3').fadeIn(250);
}, 500);
});
You are over-complicating, you can instead try this way: 您太复杂了,可以改用这种方法:
HTML - Removed ids from li's HTML-从li的ID中删除了ID
<ul id="homeModules">
<li data-target="#homeTag1"><a href="/portfolio/">VIEW OUR GALLERY</a></li>
<li data-target="#homeTag2"><a href="/about/">MEET SARAH</a></li>
<li data-target="#homeTag3"><a href="/become-a-client/">BECOME A CLIENT</a></li>
</ul>
JS JS
var $homeTags = $('.homeTags');
$homeTags.filter(':first').show(); //Show the first one
$('#homeModules > li').hover(function(){
var $target = $($(this).data('target')); //Get the target reading from data attribute of the hovered li
$target.stop(true, true).fadeIn(250, function(){ //fadeIn the target and on completion of this
$homeTags.filter(':visible').not($target).fadeOut(250); //fadeOut the others
})
});
You can also do this way as well utilizing the index and (not using any ids or data-targets) for your current html, but the one before is more explicit. 您也可以利用当前HTML的索引和索引(而不使用任何ID或数据目标)来进行这种方式,但是之前的更为明确。
$('.homeTags:first').show();
$('#homeModules > li').hover(function(){
var $target = $('.homeTags').eq($(this).index())
$target.fadeIn(250, function(){
$('.homeTags:visible').not($target).fadeOut(250);
});
});
HTML 的HTML
<ul id="homeModules">
<li id="mod1"><a href="/portfolio/">VIEW OUR GALLERY</a></li>
<li id="mod2"><a href="/about/">MEET SARAH</a></li>
<li id="mod3"><a href="/become-a-client/">BECOME A CLIENT</a></li>
</ul>
<div class="homeTags" id="homeTag1">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="homeTags" id="homeTag2">
<p>The Google Fonts API will.</p>
</div>
<div class="homeTags" id="homeTag3">
<p>Check out more advanced techniques.</p>
</div>
CSS 的CSS
#homeTag2, #homeTag3 {
display: none;
}
JQUERY JQUERY
$("#homeModules li").on("mouseenter", function () {
var whichLink = $(this).attr("id").slice(-1);
if ($("#homeTag" + whichLink).css("display") == "block") {
return false;
} else {
$(".homeTags").hide();
$("#homeTag" + whichLink).show();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.