Question

我是jQuery的新手，所以感谢任何帮助。

我是“有点”试图重现这个： http://tympanus.net/Tutorials/HoverSlideEffect/

但是，我想在其中使用带有Web内容的DIV标记与图像。我正在为我的女朋友沙龙做一个网站，所以我希望当一个人选择服务＆gt;＆gt;联系＆gt;＆gt;团队......等时，内容会改变。

当鼠标结束时，我也不希望盒子滑动。我只想在单击按钮时触发更改。

我试图搞砸这段代码，但在我目前的状态下，这对我来说有点复杂。我编写了自己的代码，但这是我的问题：

如果我打开页面并选择第一个按钮，一切都很好。因为我基本上把div滑出来，另一个滑回到它的位置;但是，如果我将按钮1格式化为按钮2，则不起作用。我不确定如何使div标签“通用”，因此无论当前框中的内容是什么，新内容都将替换它。

我理解“这个”，但不知道如何应用它。我做了代码学校，但这只给了我一个基本的理解。

我复制了代码，但它不适用于jsfiddle = http://jsfiddle.net/xrXLg/

（文档）$。就绪（函数（）{

$("#contact").css({opacity: "0", width: "0", left: "0"});

$(".run").click(function(){
    $("#services").animate({opacity: "1", width: "450"}, 400);
    $("#contact").animate({opacity: "1", width: "600"}, 400);
});

}）;

Answer 1

使用jQuery很容易。这是一个容器的示例。但是，您可以根据需要添加任意数量。他们将同时工作。滑动将在鼠标单击时开始。

HTML部分：

<div class="container">
    <div class="slide active" style="background:red;">Slide 1</div>
    <div class="slide" style="background:yellow;">Slide 2</div>
    <div class="slide" style="background:green;">Slide 3</div>
    <div class="slide" style="background:blue;">Slide 4</div>
</div>

CSS部分：

.container {position:relative; width: 400px; height: 200px;}
.slide {position:absolute; left:0px; top:0px; width: 100%; height: 100%; line-height:200px; text-align:center; display:none;}
.slide.active {display:block;}

JS Part：

jQuery('.container').bind('click', function(){
    var container = jQuery(this), slides = container.children('.slide');
    var current = container.children('.slide.active');
    var currentID = slides.index(current);
    var nextID = currentID < slides.length - 1 ? currentID + 1 : 0;
    var next = jQuery(slides[nextID]);
    if (jQuery('.container .active').length == 2) return;
    next.addClass('active');
    next.css('opacity', 0);
    current.animate({
        left: -container.width(),
        opacity: 0
    }, 1000, function(){
        current.removeClass('active');
        current.css({left: 0, opacity: 1});
    });
    next.animate({ opacity: 1 }, 1000);
});

以下是jsfiddle.net上的示例 - http://jsfiddle.net/qe4Tt/

Answer 2

您的代码运行正常。 jQuery库不包含在你的jsFiddle中。我现在补充说。这是更新的小提琴的链接：http://jsfiddle.net/xrXLg/2/。我在这里添加你的代码，因为我不能用jsFiddle链接提交答案，除非我还包含一个代码片段：

$(document).ready(function(){
    $("#contact").css({opacity: "0", width: "0", left: "0"});
    $(".run").click(function(){
        $("#services").animate({opacity: "1", width: "450"}, 400);
        $("#contact").animate({opacity: "1", width: "600"}, 400);
    });
});

动态滑动div

2 个答案: