2

我是 jQuery 的新手，所以任何帮助表示赞赏。

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

但是，我想在它们与图像中使用带有 Web 内容的 DIV 标签。我正在为我的女朋友沙龙制作一个网站，所以我希望当一个人选择服务>>联系>>团队...等时改变内容。

当鼠标悬停时，我也不希望框滑动。我只想在单击按钮时触发更改。

我有点想弄乱这段代码，但在我目前的状态下，这对我来说有点复杂。我编写了自己的代码，它有点工作，但这是我的问题：

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

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

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

$(文档).ready(函数(){

$("#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);
});

});

4

2 回答 2

0

您的代码工作正常。jQuery 库不包括您的 jsFiddle。我现在补充了。这是更新的 Fiddle 的链接：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);
    });
});
于 2013-08-24T05:06:20.693 回答
0

使用 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部分：

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/

于 2013-08-24T05:00:42.453 回答