单击幻灯片div使用jquery plus css向左或向右

Question

在接下来的2张图片中，我试图描述我想在jQuery滑动上完成的内容

IMAGE 01：我网站上有多个产品包装盒

图片02：我需要在特定点击产品旁边弹出一个弹出窗口，其他产品框应该移到下一行

Answer 1

您可以通过隐藏描述并使用jQuery显示它们来实现。 问题是：如果你想让desc divs推送产品div，那么当你点击最后一列的产品时会很奇怪。

演示：http://jsfiddle.net/Paf_Sebastien/tzg3rswv/

/* jQuery */

$(function() {
    $('.product').click(function() {
        $('.desc').hide();
        $(this).next().css('display', 'inline-block');
    });
});

Answer 2

我不明白你在问什么，但这可能会有所帮助。大多数JQuery动画的代码和语法是：

$(document).ready(function(){
    $('element').animate(properties);
});

http://api.jquery.com/animate/ 或者这是一个实际的例子：http://jsfiddle.net/JoshuaHurlburt/avttkdst/

Answer 3

好吧，我不会为你做所有事，但这里是a well started point：

var products = $(".products");
var info = $(".info", products), pos;
var lastClick;

var some_info = [6,
    "Product 1 <br/>  Info AAAAAAAAA",
    "Product 2 <br/>  Info BBBBBBBBB",
    "Product 3 <br/>  Info CCCCCCCCC",
    "Product 4 <br/>  Info DDDDDDDDD",
    "Product 5 <br/>  Info EEEEEEEEE",
    "Product 6 <br/>  Info FFFFFFFFF"
];

$("[data-id]", products).each(function(){
    var o = $(this);
    o.html("Product " + o.data("id"));
    o.on("click", function(){
        pos = info.detach();
        o.after(pos);
        info.fadeIn().animate({
            "top": o.offset().top + 20,
            "left": o.offset().left + o.innerWidth()
        });
        if (lastClick == o) {
            info.hide();
        }
        lastClick = o;
        info.html(some_info[o.data("id")]);
    });
});

尼斯编码=）......以及任何疑惑check jquery api或在此处提出更详细的问题。