我如何使用jQuery淡出图片然后转到新页面?

时间:2013-07-01 18:24:21

标签: jquery html5 image fade

我网站的首页是图片,点击后我希望它淡出然后转到主页面。我应该淡出图片然后淡入下一页的正文还是有办法一次性做到这一点?

<script>
 $(document).click(function(){     
    $('#beach').fadeTo(3000,0.30, function() {
       $("#beach").attr("src",$("#link").attr("href"));
    }).fadeTo(500,1);
    return false;

 });
</script> 

<a href="welcomepage.html#link"><img id="beach" src="wedfronttest.jpg"

提前致谢

2 个答案:

答案 0 :(得分:0)

$("a").click(function(event) {
event.preventDefaults();
var url = $(this).attr('href');
        $('#beach').fadeOut(function() { 
              window.location = url;
        });
    });

答案 1 :(得分:0)

使用Froxz的想法,我认为最好的选择是

$("a").click(function(event) {
    event.preventDefault();
    var url = $(this).prop('href');
    $('#beach').fadeOut(function() { 
        window.location = url;
    });
});

检查此JSFiddle以查看其效果! (记住你不会被重定向到JSFiddle,但你会看到这个想法)