jquery - 将 JQuery 动画绑定(bind)到现有函数

Question

我有一个现有的功能，当点击导航菜单项时，垂直网站的背景图像会发生变化。

<script type="text/javascript">
$(function() {
    $('a.panel-home').click(function(){
    $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg");
    return false;
    });
});

我不知道如何将动画绑定(bind)到此函数，以便新的背景图像淡入……现在这是一个严酷的瞬时转换。我想要的效果

$("#bgimg").fadeIn(1500);

...但我对 javascript/jquery 有点陌生。

Answer 1

将您的图像包含在 div 中，然后将效果应用于 div，如下所示:

HTML:

<div><img id="bgimg" src="...."></div>

JavaScript:

$(function() {
    $('a.panel-home').click(function(){
    $("#bgimg").parent().fadeOut(1000, function() {
        $("#bgimg").attr('src',"<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg");
        $(this).fadeIn(1000); 
    });   
    return false;
    });
});