Javascript jQuery淡出函数

我正在尝试添加一个淡出功能，它链接到另一个。目前，我有一个闪烁的标志。当用户单击徽标时，闪烁停止，稍有延迟，然后慢慢消失。有没有人能够纠正我在下面粘贴的代码

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

$（文档）.ready（函数（）{
$（“#中心gif”）。单击（函数（）{
$（'#中间gif'）.hide（）；
$（“#中心img”）.show（）；
});
$（“#中心img”）。单击（函数（）{
$（“#中心img”）.hide（）；
$（'#中心img gif'）.show（）；
});
$（'flash-link'）。单击（函数（）{
$（'center-img'）。淡出（5000）；
});
});

如果要使用

类访问元素

/

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;
          });
        );
     });
});

---

如果要使用

类访问元素

/

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( 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（）

将告诉浏览器不要委派

单击事件。如果不将其放在那里，浏览器将打开锚，而无需等待任何JavaScript执行

注
当您想要选择一个ID为的元素时，请使用此选择器：
$（“#[ID]”）
，因为此选择器
$（'html'）
仅适用于html元素。
所以我假设您的问题是图像不会褪色，对吗

这可以解决这个问题：

首先，将
。单击（）
-函数更改为：

$().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（）
将告诉浏览器不要委派
单击事件。如果不将其放在那里，浏览器将打开锚，而无需等待任何JavaScript执行

注
如果要选择ID为的元素，请使用此选择器：
$（'#[ID]'）
，因为此选择器
$（'html'）
仅适用于html元素。
是否可以添加此选择器的JS Bin？我今天很懒。它使您能够在测试环境中工作。所以其他人不必在他们的环境中测试代码。您的fadeOut（5000）声明是正确的，但元素选择器是错误的，请检查我的答案，您将无法理解。您可以添加一个JS Bin吗？我今天很懒。它使您能够在测试环境中工作。所以其他人不必在他们的环境中测试代码。您的淡出（5000）声明是正确的，但是，元素选择器是错误的，请检查我的答案，您将无法理解。这不起作用，因为没有元素$（'flash-link'）和$（'center-img'）。正如我所说，我没有测试它，只是从OP复制了代码，我没有识别它。啊。你完全正确。它们应该是身份证。我在回答中更正了它。这不起作用，因为没有元素$（'flash-link'）和$（'center-img'）。正如我所说，我没有测试它，只是从OP复制了代码，我没有识别它。啊。你完全正确。它们应该是身份证。我在回答中更正了它。我尝试过这种方法，但它只是导航到一个空白屏幕？？我添加了在同一窗口打开链接的方法。对，很抱歉，这是一个痛苦，但你测试过它吗？因为它没有做转换，我已经在我的网站上更新了代码…顺便说一句，供你参考；我意识到，我忘了在这里添加id符号$（takeId）.show（）。我用这个$（'#'+takeId）.show（）纠正了这个错误；我尝试过这种方法，但它只是导航到一个空白屏幕？？我添加了在同一窗口打开链接的方法。对，很抱歉，这是一个痛苦，但你测试过它吗？因为它没有进行转换，我已经在我的网站上更新了代码…顺便说一句，供你参考；我意识到，我忘了在这里添加id符号$（takeId）.show（）。我用这个$（'#'+takeId）.show（）纠正了这个错误；