Question

在webform中有3个div和一个img标记，每当我们点击div时，最后一个图像的值必须淡出，并且新图片会淡入。例如：

<script>
    $(document).ready(function () {

        $("#d2").click(function () {
             $("#img1").fadeToggle();
            document.getElementById("img1").src = "1.jpg";
            $("#img1").fadeIn('fast');
        });

        $("#d3").click(function () {
           $("#img1").fadeToggle();
            document.getElementById("img1").src = "2.jpg";
            $("#img1").fadeIn('fast');
        });

        $("#d4").click(function () {
             $("#img1").fadeToggle();
            document.getElementById("img1").src = "3.jpg";
            $("#img1").fadeIn('fast');
        });
    });
</script>

这是错的！请帮帮我！

Answer 1

The issue似乎是fadeIn和fadeOut方法的异步性质

$(document).ready(function () {

    $("#d2").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "http://placehold.it/32/ff0000";
            $(this).fadeIn('fast');
        });
    });

    $("#d3").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "http://placehold.it/32/ffff00";
            $(this).fadeIn('fast');
        });
    });

    $("#d4").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "http://placehold.it/32/000000";
            $(this).fadeIn('fast');
        });
    });
});

演示：Fiddle

我将如何做？，将一个名为img-toggle的类和一个属性data-img添加到d1，d2和{{ 1}}元素，如

d3

然后

<div id="d4" class="img-toggle" data-img="http://placehold.it/32/000000">Test</div>

演示：Fiddle

Answer 2

不限制只有3张图片，你可以为所有这些div添加一个类，例如clickdiv。然后你可以这样继续：

$(document).ready(function(){

   $(".clickdiv").click(function(){

     var i=$(this).index();
     $("#img1").fadeToggle();
     document.getElementById("img1").src = (i-1)+".jpg";
    $("#img1").fadeIn('fast');

   });

});

Answer 3

//Include jQuery first....
<script>
$(function () {
    $("#Id1").click(function () {
        $("#img1").stop(true, true).fadeOut(function(){
            this.src = "put you new displaying image url";
            $(this).fadeIn(); //
        });
    });
});
</script>

淡入淡出？ jQuery的

3 个答案: