jQuery悬停淡出p标签并淡出另一个

时间:2013-12-05 19:06:36

标签: javascript jquery html css fade

所以我在解决这个问题时遇到了问题。我有3个模块,ID为#mod1,#mod2,#mod3。当你将鼠标悬停在这些上面时,我希望它们淡出可见的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);
});

2 个答案:

答案 0 :(得分:5)

你过于复杂,你可以这样试试:

HTML - 从li的

中移除了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

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
    })
});

<强> Demo

您也可以这样做,以及利用索引和(不使用任何ID或数据目标)为您当前的HTML,但前面的那个更明确。

$('.homeTags:first').show();
$('#homeModules > li').hover(function(){
    var $target = $('.homeTags').eq($(this).index())
    $target.fadeIn(250, function(){
        $('.homeTags:visible').not($target).fadeOut(250);
    });
});

<强> Demo

答案 1 :(得分:0)

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

#homeTag2, #homeTag3 {
    display: none;
}

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();
  }
});