Question

我一直试图在div翻转上实现简单的交换效果，但它无法正常工作。

这是HTML

<li><div id="main1"><a href="#"><img src="images/plane1.jpg" id="image1" style="margin:0 4px; margin-left:0;"/></a>
                <div class="flex-caption">
                  <h3>Hollywood</h3>
                </div></div>
            </li>

和jQuery

$(function () {
    $('#main1').hover (function () {
    $('#image1').src="images/img01.jpg";
    }, function () {
    $('#image1').src="images/plane1.jpg";

    });});

Answer 1

尝试使用.attr()方法而不是.src。类似的东西：

$('#image1').attr('src', 'images/img01.jpg')

Answer 2

PURE CSS demo 1 PURE CSS demo 2 (With fade fx)
更好的方法？ 没有JS。 为什么？
原因如果你使用JS ，在悬停时你需要等待新服务器请求新图像所以...通过这样做你将获得非常专业的结果。

<li>
  <div id="main1">
    <a href="#">
       <img src="images/plane1.jpg"/>
       <img src="images/img01.jpg"/> <!-- this one is hidden but loaded! -->
    </a>
    <div class="flex-caption">
      <h3>Hollywood</h3>
    </div>
  </div>
</li>

CSS：

#main1 > a       img+img{ display:none;  }
#main1 > a:hover img+img{ display:block; }

如果您只是学习jQuery，JS一般而且您想玩：

var $img = $('#image'); // Cache the elements you plan to reuse!
$('#main1').hover(function() {
    $img[0].src = "images/img01.jpg";
}, function () {
    $img[0].src = "images/plane1.jpg";
});

或者也使用数组：

var arr = ["images/plane1.jpg", "images/img01.jpg"];
var $img = $('#image');
$('#main1').hover(function() {
    $img[0].src = arr.reverse()[0];
});

或者还使用条件运算符?: （AKA 三元运算符）：

var $img = $('#image');
$('#main1').hover(function( ev ) {
   $img[0].src = "images/"+ (ev.type=="mouseenter"?"img01":"plane1") +".jpg"; 
});

在div翻转上交换图像的jquery

2 个答案: