Question

您好，这是我正在处理的jsfiddle的链接：http://jsfiddle.net/edddotcom/7NQKU/6/

这个想法是当你点击一个图像时它的容器放大并显示一些文字，现在如果你再点击第二个图像，那么第一个图像应该收缩回较小的无文本状态，

我无法想到一种方法，我可以这样做，当点击一个图像时，除了this之外的所有图像都应该收缩（如果它们处于较大的状态）

我将使用超过2张图片，因此我需要将此规则应用于所有其他n-1张图片

HTML：

<div class="row">
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
    <div class="container">
        <img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>

    </div>
</div>

CSS：

.row {
    max-width: 1500px;
}
.container {
    display: block;
    width: 200px;
    height: 116px;
    background-color: red;
    float: left;
    margin: 5px;
}
span {
    margin-top: 10px;
    margin-left: 10px;
    max-height: 100%;
    text-align: justify;
}
img {
    width:100%;
    max-width: 400px;
    min-width: 200px;
}

JavaScript的：

$(document).ready(function () {
    //ON CLICK
    $("span").hide();
    $("img").toggle(function () { //fired the first time
        $(this).parent().animate({
            //FIRSTCLICK COMMAND
            height: "400px",
            width: "400px"

        }, function () {
            $(this).children("span").show();
        });
        //Enlarges container then shows text

    }, function () { // fired the second time 
        $(this).siblings("span").hide(0, '', function () {
            $(this).parent(".container").animate({
                //SECONDCLICK COMMAND
                height: "116px",
                width: "200px"
            });
        });

    }); //Hides text then contracts container

});

Answer 1

假设您在事件处理程序中并且this是当前图像，您可以选择除当前图像之外的所有图像：

 $(".container img").not(this)

这将允许您操作所有其他图像。如果在其他图像中，您想要知道哪个图像被展开，您可以检查容器大小，也可以在扩展的类上放置一个类。如果你在扩展的类上放了一个特殊的类，那么你可以用你自己的选择器找到扩展的类：

$(".container.expanded")

或者，检查尺寸：

$(".container").not(this).each(function() {
    if ($(this).height() > 200) {
        // this container is expanded so we need to contract it
    }
});

在您的特定代码中，您可以更改此内容：

$(this).siblings("span").hide...

到此：

// within our row, find all containers except the current container
$(this).closest(".row")
    .find(".container").not($(this).closest(".container"))
    .find("span").hide...

如何制作一个div动画影响其他人

1 个答案: