Question

我的页面上有图像，我正在使用java脚本更改其图像源。我只需要用一些漂亮的滑动效果来改变这个图像。我想要的是当我点击一个按钮来改变图像时，第一个图像应该消失，另一个图像应该以某种方式显示（不像是混蛋或眨眼）

Answer 1

您可以将第二张图片放在第一张图片后面，然后在第一张图片上制作fadeout（）效果。

Answer 2

使用此代码

。

$（ “firstimage_classname”）淡出（）; $（ “secondimage_classname”）淡入（）;

你也可以给出时间间隔。

否则尝试

。

$（ “firstimage_classname”）效果基本show（）; $（ “secondimage_classname”）淡入（）;

Answer 3

试用此代码

 $(".YourClassSelector").fadeIn(1000).delay(2000).fadeOut(2000, function () {
        var $next = $(this).attr('src','http://abc.com/logo.png');

    });

希望它会对你有所帮助。

享受

Answer 4

这里是示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Srtict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery.js"></script>
        <style type="text/css">
            .front{
                width: 300px;
                height: 300px;
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 10;
            }

            .back{
                width: 300px;
                height: 300px;
                position: absolute;
                left: 10px;
                top: 10px;
                z-index: 1;
            }
        </style>
        <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="style_lte6.css" /> <![endif]-->
    </head>
    <body>
        <div id="content">
            <img src="1.jpg" class="front" />
        </div>

        <script type="text/javascript">
            $(function(){
                $('.front').click(function(){
                    $('#content').append('<img src="2.jpg" class="back" />');
                    $(this).fadeOut(500, function(){
                        $('.front').remove();
                        $('.back').addClass('front').removeClass('back');
                    });
                });
            });
        </script>
    </body>
</html>

如何使用jQuery更改图像源并加载它具有一些很好的效果

4 个答案: