Question

$('.blue-anim').hover(function(){

    setTimeout(function(){
        $('.blue-anim').load('/web #physics')
    }, 1000);
    $('.bluefigcaption').text("Physics").removeClass('blue_figcaption').addClass('new_caption');

    }, function(){
        $('.blue-anim').load('/web #past');
        $('.blue figcaption').text("Past").removeClass('new_caption').addClass('blue_figcaption');
    }
);

这是我用于悬停图片的java脚本。悬停在正确，因为它替换为图像与另一个图像与load（）。 hoverout也可以工作，从根本上带回旧图像。但是在hoverout之后，jquery再次将hoverin图像带回来。当我签入firebug时，我看到hoverin中的load（）函数再次运行。只是load（）函数没有别的。为什么会这样？加载脚本是嵌入在html中的吗？如果是这样，我怎么能删除它？

Answer 1

我尝试重新组合你的代码，这个

$(function () {
    $(".blue-anim").hover(function() {
        $(".blue-anim").load("https://raw.githubusercontent.com/xxxmatko/xDev.RequireJs/master/README.md");
        $('.blue-figcaption')
            .text("Physics")
            .removeClass('blue-figcaption')
            .addClass('new-caption');
    }, function() {
        $(this).load("https://raw.githubusercontent.com/xxxmatko/xDev.Boilerplates/master/README.md");
        $('.new-caption')
            .text("Past")
            .removeClass('new-caption')
            .addClass('blue-figcaption');        
    });
});

.blue-anim {
    background: blue;
    width: 600px;
    height: 200px;
}

.blue-figcaption {
    color: blue;
}

.new-caption {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blue-anim">
</div>
<div class="blue-figcaption">
</div>

适合我

jquery不必要地加载内容

1 个答案: