2

我是javascript和jquery的新手，所以请原谅我的无知。我创建了一个网页，您可以在其中滚动文本链接并且另一个 div 中的图像发生变化。我使用了这里的方法：http: //jsfiddle.net/fWpJz/1/来创建我的页面，它运行良好。

这是我正在使用的代码：

$(document).ready(function () {
    $('.productmenu a').hover(function () {
        $('#prodimage img').attr('src', $(this).data('image-src'));
        $('.image-src').stop().animate({.attr}, slow);
    });
});

我想在鼠标悬停时减慢从一个图像到另一个图像的过渡，这样图像就不会突然翻转。

我使用本教程（http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/）来创建我喜欢的效果，但不知道如何将它与基于图像更改的在链接悬停。这是来自 jsfiddle.net 的代码：

$(document).ready(function () {
    $('.menu a').hover(function () {
        $('#container img').attr('src', $(this).data('image-src'));
    });
});

谁能指出我正确的代码段以及如何将其添加到我的javascript中？我以前从未使用过jquery，所以我不知道如何添加动画功能。

谢谢！！

4

3 回答 3

3

如果我告诉你你根本不需要使用 jQuery.animate 来达到你想要的效果怎么办？使用CSS3 过渡！这是你的小提琴的一个分叉版本，展示了如何完成你想要做的事情（我认为）（我也把 html/css/js 放在了这篇文章的底部）。

加载 DOM 内容后，该alignItems函数确保所有图像都位于页面上的同一位置。该脚本跟踪正在显示的当前图像。每次将鼠标悬停在不同的链接上时，正在显示的图像都会更新，因此旧的当前图像的不透明度设置为 0，而新的当前图像的不透明度设置为 1。然后可以使用 CSS 过渡来为不透明度设置动画，它吹走了$.fn.animate，但只适用于现代浏览器（见caniuse ...motherf***ing IE - _ - ）。下面的代码：

html

<div class="menu">
  <a href="#" data-image-id="1">link 1</a>
  <a href="#" data-image-id="2">link 2</a>
  <a href="#" data-image-id="3">link 3</a>
  <a href="#" data-image-id="4">link 4</a>
  <a href="#" data-image-id="5">link 5</a>
</div>

<div id="container">
  <img id="1" src="http://farm7.staticflickr.com/6092/6330704947_dd7e1b453c_t.jpg" />
  <img id="2" src="http://farm1.staticflickr.com/13/15463218_8651d51b21_t.jpg"/>
  <img id="3" src="http://farm3.staticflickr.com/2570/4220856234_029e5b8348_t.jpg" />
  <img id="4" src="http://farm4.staticflickr.com/3036/2975303180_86c4858b2b_t.jpg" />
  <img id="5" src="http://farm7.staticflickr.com/6216/6240217938_aeed84634a_t.jpg" />
</div>

css

.menu a {
  padding: 2px 4px;
  color: #555;
  text-decoration: none;
}

.menu a:hover {
  color: #ddd;
  background: #333;
}

#container {
  margin-top: 10px;
}

#container img {
  margin: 4px;
  padding: 4px;
  border: 1px dashed #aaa;
  opacity: 0;
  -webkit-transition: opacity 500ms ease-in;
  -moz-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
}

javascript

$(document).ready(function () {
  alignImages();

  var currentImgId = 0;
  $('.menu a').hover(function () {
      var oldImgId = currentImgId;
      currentImgId = this.dataset.imageId;
      $(document.getElementById(oldImgId)).css('opacity', 0);
      $(document.getElementById(currentImgId)).css('opacity', 1.0);
  });
});

function alignImages() {
  var $images = $('#container img');
  var position = $images.eq(0).position();
  $images.each(function() {
    this.style.position = 'absolute';
    this.left = position.left;
    this.top = position.top;
  });
}
于 2013-10-10T02:46:12.957 回答
0

尝试这个：

你的 HTML 应该是这样的：

<div id="container" style="display:none;">
  <img src="">
</div>

并在您的脚本中：

$('.menu a').hover(function () {
        $('#container').hide();

        $('#container').fadeIn().animate({ opacity: 1, top: "-10px" }, 'slow');

        $('#container img').attr('src', $(this).data('image-src'));
    });

过渡效果应该很好看：JSFiddle

于 2013-10-10T02:09:12.860 回答
0

下面是使用 setTimeout 的实现之一

var count = 0;
$(document).ready(function () {
    $('.menu a').hover(function () {
        var self = this;
        var innerCount = ++count;
        setTimeout(function(){
            if(innerCount == count) //If mouse move out within 1 second, will not show new image
            {
                $('#container img').attr('src', $(self).data('image-src'));
            }
        }, 1000); //1 second delay
    });
});
于 2013-10-10T02:10:09.307 回答