如何添加fadeIn-淡出过渡到交换图像

Question

我发现了各种各样的方法来向过渡图像添加漂亮的淡入淡出过渡，但是实际上没有人说出如何将脚本应用于html文档

这是到目前为止我得到的..如何向其中添加fadeIn，fadeOut脚本？ 而不只是在图像之间滑动

<img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" 
onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" />

这是HTML文档的整个部分。

<td colspan="2" rowspan="5" align="left" valign="top"><a href="portfolio.html"><img src="images/portfolio.jpg" alt="" width="155" height="150" id="portfolio" onmouseover="MM_swapImage('portfolio','','images alt/index-alt_12.jpg',1)"
    onmouseout="MM_swapImgRestore()" /></a></td>

如何隔离“ index-alt_12.jpg”并为其创建ID标签？ 我应该把代码放在哪里？

Answer 1

由于您使用的是鼠标悬停和滑出，因此我假设您只有两个图像，对吗？

您可以在不使用javascript的情况下执行此操作。 它仍然可以在较旧的浏览器中运行，但是动画淡入淡出仅在webkit（即10和mozilla）上有效。 这是唯一的问题，如果您必须在旧版本的IE上具有此淡入淡出功能。

您可以做的是放置两张图像，一张放在另一张上。

例如-假设通过CSS将其一个放置在另一个上

<img class="imageA" src="a.jpg" />
<img src="b.jpg" />

在css上

.imageA {
   -webkit-transition: all 300ms ease;
   -moz-transition: all 300ms ease;
   -o-transition: all 300ms ease;
   transition: all 300ms ease;
   opacity: 1;
}

.imageA:hover {
   opacity: 0;
}

您也可以使用过渡效果来将任何一个CSS属性设置为另一个属性。 代替下面的两个图像，下面的图像也可以是容器的背景图像，如下所示，但是仍然只能通过CSS来完成。

Answer 2

您是否正在使用jQuery？ 如果是这样，那么为您提供一个不错的解决方案！ 在HTML页面的底部（包含jQuery的位置），您可以使用类似以下的内容：

$(document).ready(function() {
  $("#portfolio").mouseover(function() {
    $("#img1").fadeTo(200, 1); 
    // The above means take 200ms to fade to an opacity of 1.0 (fully opaque).
    $("#img2").fadeTo(200,0);
    // The above says the same thing, but for fading out
  });
});

如果您稍作改动，可以让他们根据显示的内容来回切换，但这是一般的想法。

瞧！ 我知道您正在寻找javascript答案，但是jQuery对于类似这样的东西非常有用，并且会向您强烈推荐。

Answer 3

您尝试使用硬编码图像进行操作时会遇到一些错误，但是您可以改用CSS作为解决方法。

首先，我将设置一个div并让Portfolio.jpg成为背景图像：

HTML：

<div id="portfolio"></div>

CSS：

#portfolio {
    background:url('images/portfolio.jpg') no-repeat;
    height: 150px;
    width: 155px;
}

这是一种在鼠标悬停时淡出#portfolio ，交换新背景图像，然后淡入div的方法。需要jQuery 1.0+

$('#portfolio').mouseover(function() {
    var self = $(this);
    self
        .fadeOut('slow', function() {
            self
                .css('background-image', 'url("images alt/index-alt_12.jpg")')
                .fadeIn('slow');
        });
});