jQuery FadeOut函数

时间:2012-07-18 11:04:54

标签: javascript jquery html css animation

我正在尝试添加一个链接到另一个的fadeOut函数。 CLICK HERE目前我有一个闪烁的标志。当用户点击徽标时,闪烁停止,稍有延迟然后慢慢淡出。那里有没有人能够纠正我下面粘贴的代码?

    <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>

2 个答案:

答案 0 :(得分:4)

如果您想使用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;
          });
        );
     });
});

答案 1 :(得分:0)

所以我认为你的问题是那个图像没有消失,对吗?

这可以解决它:

首先将您的.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元素。