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

Question

在下面的2张图片中，即时通讯试图描述我要在jQuery滑动上完成的操作

图片01：我的网站中有多个产品盒

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

Answer 1

您可以通过隐藏说明并使用jQuery显示说明来实现。 问题是：如果您希望desc div推送产品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

好吧，我不会为您做所有事情，但这是一个很好的起点 ：

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")]);
    });
});

好的编码=）...，如有任何疑问， 请检查jquery api或在此处提出更详细的问题。