Javascript jquery在div翻转时交换图像

我一直试图在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>

尝试使用方法而不是.src。比如：

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

更好的方法没有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>

---

如果您只是学习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];
});

或者也使用条件运算符

？：

（又称三元运算符）：

---

@stacksam它可以与javascript的

.src

一起工作，但是您需要从jQuery对象返回

这个
指针，比如：
$（“#image1”）[0]。src
谢谢，但这没有按需要工作，我想在滚动时隐藏第一个图像，只在滚动时显示。是的，服务器问题很严重，但我先加载它们并使它们不可见。@stacksam我不敢相信我会这么说，但是：不仅仅是在HTML中交换图像顺序，直到得到所需的结果：）这么简单？！感谢Roko，事实上，我得到了一堆关于这个效果的图像，结果我得到了很多函数来做同样的事情。我将尝试阵列，看看我是否可以解决这个问题，谢谢alotagain，阵列也没有工作！如果html和css有效，我可能会坚持使用。很好，html方法有效，我更喜欢使用它，而不是jquery，但我看到的唯一问题是，如果我在好莱坞徘徊，它不起作用。。
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];
});

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