jQuery淡出函数

jQuery FadeOut function

本文关键字：函数 淡出 jQuery      更新时间：2023-11-29

我正在尝试添加一个fadeOut函数，该函数链接到另一个函数。点击这里目前我有一个闪烁的标志。当用户点击徽标时，闪烁停止，略有延迟，然后慢慢淡出。有人能纠正我粘贴在下面的代码吗？

    <script>
         $(document).ready(function(){
         $("#center-gif").click(function(){
            $('#center-gif').hide();
            $('#center-img').show();
            });
         $('#center-img').click(function(){
            $('#center-img').hide();
            $('#center-img-gif').show();
        });
         $('flash-link').click(function(){
            $('center-img').fadeOut(5000);
         });
    });
        </script>

如果要使用class/id访问元素；必须始终在开头定义.和#，就像css一样。

一些例子：

$('img').fadeOut();//selects all img elements
$('.img').fadeOut();//selects all elements with class="img"
$('myClass').fadeOut(); //false
$('.myClass').fadeOut(); //true
$('myId').fadeOut(); //false
$('#myId').fadeOut(); //true

以下是使用较少代码的jQuery解决您的问题：

$(document).ready(function(){
     $("img").click(function(){
        var takeId = $(this).attr('id');//takes clicked element's id
        $('img').hide();//hides all content
        $('#'+takeId).show();
        //matches clicked element's id with element and shows that
     });
     $('#flash-link').click(function(){//define '#' id declaration here
        $('#center-img').fadeOut(5000,//new function after fadeOut complete
          function() {
             window.open('url','http://iamnatesmithen.com/jukebox/dancers.php');
             return false;
          });
        );
     });
});

所以我认为你的问题是图像不会淡出，对吧？

这可以解决问题：

首先将您的.click()-函数更改为：

$().click( function(event) {
    // cour code
    event.preventDefault();
}

然后改变最后一个：

$('#flash-link').click( function(event) {
    $('#center-img').fadeOut( 5000, function() {
        window.location.href = 'jukebox/dancers.php';
    });
    event.preventDefault();
});

我没有测试，但它应该有效。它的作用是：它淡出图像，并在准备好时调用一个函数。此功能然后重定向到您的下一页。

event.preventDefault();将通知浏览器不要委派click-事件。如果你不把它放在那里，浏览器会在不等待任何JavaScript执行的情况下打开锚。

备注

如果要选择具有ID的元素，请使用此选择器：$('#[id]')，因为此选择器$('html')仅适用于HTML元素。

相关文章：