Question

我有一台带有光线图像的IMG 标签。我对一次Hover(电弧)活动视而不见,以便把“电弧”改变成对冲的彩色形象,并重新对停用的光线。

但是,这一变化是突然的。因此,我要补充一点点,使肤色似乎消失和消失。我写了我认为会起作用的以下文字,但却没有。 (图像变化,但没有结果或拖延。) 我做了什么错误?

            $("#showForm").hover(
              function () {
                $(this).fadeIn( slow , function(){
                    $(this).attr("src",  images/AddButtonSmall.gif );
                });
              }, 
              function () {
                $(this).fadeIn( slow , function(){
                    $(this).attr("src",  images/AddButtonSmallGray.gif );
                });
              }
            );

Answer 1

这里是两种解决办法。你的法典没有发挥作用,因为你正在确定立即改变形象的来源。这或许更容易装上两种图像,把图像上传给特别安全局,然后当母集装箱被 mo掉时,就把彩色放在外。或者,你可以相互指责。

c)

.fader { display: inline-block; }
.fader img:last-child {
    position: absolute;
    top: 0; 
    left: 0;
    display: none;
}

html

<div class="fader">
    <img src="http://placehold.it/300x300/000fff" />
    <img src="http://placehold.it/300x300/fff000" />
</div>

f 湿度

http://jsfiddle.net/Xm2Be/3/

$( .fader ).hover(function() {
    $(this).find("img:last").fadeToggle();
});

交叉点

rel=“noretinger”>http://jsfiddle.net/Xm2Be/2/

$( .fader ).hover(function() {
    $(this).find("img").fadeToggle();
});

Answer 2

Where are you fading out ? Fade in does display:block with opacity changing from 0 to 100. Fade out does display:none with opacity changing from 100 to 0.

Once, you fadeIn, image is display:block and opacity is 100. So, you dont see an animation. So, either do a display:none or fadeOut before fadeIn again.

Given is example with explains things. You should change it according to your requirements.

$("#showForm").hover(
              function () {
                $(this).fadeOut( fast ).fadeIn( slow , function(){
                    $(this).attr("src",  images/AddButtonSmall.gif );
                });
              }, 
              function () {
                $(this).fadeOut( fast ).fadeIn( slow , function(){
                    $(this).attr("src",  images/AddButtonSmallGray.gif );
                });
              }
            );

Answer 3

与此相关

 $("#showForm").hover(
          function () {
              $(this).fadeOut( fast ,function(){
                 $(this).attr("src",  images/AddButtonSmall.gif );
                 $("#img_src").html("images/AddButtonSmall.gif"); 
              });
            $(this).fadeIn( fast );
          }, 
          function () {
            $(this).fadeOut( fast ,function(){
                 $(this).attr("src",  images/AddButtonSmallGray.gif );
                 $("#img_src").html("images/AddButtonSmallGray.gif"); 
              });
            $(this).fadeIn( fast );
          }
        );

http://jsfiddle.net/ranganadh/kmEF3/“rel=“nofollow”

Answer 4

 $(this).fadeIn( slow ,

这实际上正在缓慢地试图使这一要素落空。

$("#showForm")

相反,如果你想要把彩色形象直接放在目前的光线图像之上,并标出隐藏的肤色形象,那么这种形象就会慢慢慢消失。假定他们站在另一个人头上:

$("#showForm").hover(
    function () {
       $("#colorImageID").fadeIn();
    }, 
    function () {
       $("#colorImageID").fadeOut();
    });
  }

);

假设html是这样的(如果相同的绝对征兆是将它们放在同一个准确的位置上,那么可能的话,例如立场:放弃;左边:20;顶点:20px);

<img src= images/AddButtonSmallGray.gif  class="sameAbsolutePosition">
<img src= images/AddButtonSmall.gif  style="display:none;" class="sameAbsolutePosition">

To reiterate, you ll be fading a new image on top of another image. You could also fade the grayscale image out simultaneously.

Answer 5

更好的解决办法:

争取完成这项工作。使用CSS s sprites。如果你坚持要失败 In, fadeOut, use transitions.

www.un.org/Depts/DGACM/index_spanish.htm 针对以下评论,我可以撰写一些法典,因为我无法预见到在门槛值的大小和立场。我也想澄清,我的建议是利用间谍活动,然后进行过渡,以加强“功能”,而不仅仅是过渡,因为我假定他需要这样做才能在IE8和IE9中工作。

Answer 6

You could do this cross fade with css3 using transition too. Not available for all browsers but still... http://www.w3schools.com/css3/css3_transitions.asp

https://stackoverflow.com/questions/4717117/cs-image-link-change-on-hover”

For example:

#showForm
{
    background: transparent url( images/AddButtonSmallGray.gif ) center top no-repeat;

    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}

#showForm:hover {
    background-image: url( images/AddButtonSmall.gif );
}

Answer 7

Try with this

         $(".image_hover").mouseover(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr( src , new_src);
        $(this).attr( data-alt-src , old_src);
      });
     $(".image_hover").mouseout(function(){
        var old_src=$(this).attr("src");
        var new_src=$(this).attr("data-alt-src");
        $(this).attr( src , new_src);
        $(this).attr( data-alt-src , old_src);
      });

友情链接