Question

我需要帮助我的jQuery脚本，当鼠标悬停和img类显示时.conceptcontent更改，当鼠标离开img时更改回来但是我可以隐藏.conceptcontent课程？

(function ($) {
    $(".img-swap").hover(

        function () {
            this.src = this.src.replace("_off", "_on");
            $(".conceptcontent").show("slow");
        },

        function () {
            this.src = this.src.replace("_on", "_off");

        });

    var imgSwap = []; $(".img-swap").each(function () {
        imgUrl = this.src.replace("_off", "_on");
        imgSwap.push(imgUrl);
    });

    $(imgSwap).preload();
})(jQuery);

HTML

 <title>Untitled Document</title>

 </head>
 <body>
<!--background-->
<div id="intro">
<h1 id="rubrik">Josef Carlsson</h1>
</div>


<div class="meny">
<div id="home"><img src="iconer/home_off.svg" class="img-swap"></div> 
<div id="about"><img src="iconer/ommig_off.svg" class="img-swap"></div> 
<div id="design"><img src="iconer/design_off.svg" class="img-swap"></div> 
<div id="internet"><img src="iconer/internet_off.svg" class="img-swap"></div>
<div id="camera"><img src="iconer/kamera_off.svg" class="img-swap"></div>
<div id="concept"><img src="iconer/koncept_off.svg" class="img-swap"></div> 
 </div>

 <div class="menytext">
<div id="hometext">Start</div>
<div id="abouttext">About me</div>
<div id="designtext">Design</div>
<div id="internettext">Webb</div>
<div id="cameratext">Pictures</div>
<div id="concepttext">Concepts</div> 
 </div>

 <ul class="conceptcontent">
<li>emotion</li>
<li>[in]sight</li>
<li>will i make it</li>
<li>trace</li>
    <li>datemate</li>
    <li>pacman</li>
</ul>

这是使用的html

Answer 1

难道你不需要像你有show（）那样的隐藏吗？

编辑：我开始猜测动画正在排队。我试过复制尝试这个：

(function($){
$(".img-swap").hover(
function(){this.src = this.src.replace("_off","_on");
        $(".conceptcontent").stop(true.true).show("slow");},

function(){this.src = this.src.replace("_on","_off");
           $(".conceptcontent").stop(true,true).hide("slow");

 });

jQuery stop（）停止当前动画。

Answer 2

你可以用它来隐藏它

 $(".conceptcontent").hide('slow');

Answer 3

与你为鼠标悬停所做的相反的是：

...
$(".img-swap").hover(
  function(){
    this.src = this.src.replace("_off","_on");
    $(".conceptcontent").show("slow");
  },
  function(){
    this.src = this.src.replace("_on","_off");
    $(".conceptcontent").hide("slow");
  }
);
...

修改我键入的速度比其他人慢...我猜你的格式化需要一两分钟;）

JQuery悬停图像交换，mouseout

3 个答案: