Question

当我点击第二张照片以展开第一张照片而不是第二张照片时，jQuery动画接受一件事情的一切都很好用。我在这里编辑了文件，所以显示第二张照片。

这是我的代码

        #expand .bio-pic2 {
        position:absolute;
        top:0;
        left:0;
    }
    #expand {
        position:absolute;
        width:1000px;
        border: 1px solid black;
        display: none;
        background-color:#ffffff;
        z-index:9999;
       height:323px;
    }
    .bio-pic2 img {
        position:absolute;
        top:0;
        left:0;
        width:323px;
    }
    .testimonial {
        position:absolute;
        top:333px;
        left:0;
        font-size:15px;
    }
    .desc {
        position:absolute;
        top:10px;
        left:333px;
    }
    .bio-pic {
        float:left;
        cursor: pointer;
        z-index:9998;
        margin:0 5px 0 0;
    }

        <div id="expand">
        <div class="test">
            <div class="bio-pic2">
                <img src="http://www.brent-ransom.com/photo-img.jpg" />
                <div class="bio-nt">
                        <h2>Name</h2>

                        <h3>Position</h3>

                </div>
            </div>
            <div class="testimonial">A testimonial!</div>
        </div>
        <div class="desc">This is a paragraph of text.</div>
    </div>

        <div class="bio-pic">
            <img src="http://www.brent-ransom.com/photo-img.jpg" />
        </div>
        <div id="expand">
            <div class="test">
                <div class="bio-pic2">
                    <img src="http://brent-ransom.com/photo2-img.jpg" />
                    <div class="bio-nt">
                            <h2>Name</h2>

                            <h3>Position</h3>

                    </div>
                </div>
                <div class="testimonial">A testimonial!</div>
            </div>
            <div class="desc">This is a paragraph of text.</div>
        </div>
        <div class="bio-pic">
            <img src="http://brent-ransom.com/photo2-img.jpg" />
        </div>

    $(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand");
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

以下是jsfiddle的链接，我正在处理http://jsfiddle.net/BrentRansom/h64CZ/1/

Answer 1

你可以拥有像这样的不同的唯一ID

$(".bio-pic").click(function (e) {
    e.stopPropagation();
    //$('.bio-pic2').toggle("slow");
    var menu = $("#expand-"+$(this).attr("id").split("-")[1]);
    $(menu).show().animate({
        width: 500
    }, 1000);
});
$("#expand-1, #expand-2").click(function () {
    $(this).animate({
        width: 0
    }, 1000, function () {
        $(this).hide();
    });
})

或使用类（更好的方法）

演示http://jsfiddle.net/h64CZ/2/

Answer 2

您有两个id="expand"元素。这是禁止的 - 它可能会导致javascript发疯。

这是来自 MDN ：

的qoute

此属性定义唯一标识符（ID），该标识符在整个文档中必须唯一。

Answer 3

使用<div class="expand">

而不是<div id="expand">

Jquery动画第二张照片没有显示

3 个答案: