单击 div 向左或向右滑动 jquery 加 css

Question

在下面的 2 张图片中，我试图描述我想在我的 jQuery 滑动

上完成什么

IMAGE 01 :我的网站有多个产品框

IMAGE 02 : 我需要在特定点击的产品旁边弹出一个弹出框，其他产品框应该移到下一行

Answer 1

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

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

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

Answer 2

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

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

/* jQuery */

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

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 或在此处提出更详细的问题。

单击 div 向左或向右滑动 jquery 加 css

On Click slide div left or right using jquery plus css

html

css

jquery

sliding