Question

我正在尝试创建一个简单的jquery图像库，其中单击缩略图按钮（每个图像1个）通过淡入淡出图像交换图像并交换文本标题。

我的div包含绝对位于另一个顶部的图像，旁边有一个标题，下方有缩略图/按钮。

我编写的jquery工作 - 除了加载页面时的第一次转换。第一次转换使目标图像出现，然后淡出，然后淡入。它应该简单地淡入。

我是jquery的新手，如果这是一个糟糕的代码，那么道歉......

有谁可以告诉我为什么第一次转换不能正常工作？

由于

JQUERY：

$(document).ready(function(){
    $('.gallery_button').click(function(){
     $('.gallery_slide').animate( {opacity:0.0}, 2000 );
     $('#slide'+$(this).attr('id')).toggleClass('visible');
     $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );
     $('.gallery_caption').hide();
         $('#caption'+$(this).attr('id')).show();
         $('#caption'+$(this).attr('id')).toggleClass('visible');
    });
});

HTML：

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2"/>Caption2</div>
<div class="gallery_caption hidden" id="caption3"/>Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="2"/></div>
<div class="gallery_button"><img src="button.gif" id="3"/></div>
</div>

CSS：

#gallery_slider{position:relative; height:500px;}
.gallery_slide{position:absolute; top:0; left:0; width:640px; height:480px;}
.gallery_caption{position:absolute; bottom:20px; left:660px; width:160px; min-height:150px;}
.gallery_button{width:10px; height:10px; margin:490px 8px 0 0; float:left;}

.hidden{display:none;}
.visible{display:block; visibility:visible;}

Answer 1

这正是这段代码告诉它的事情：

 $('#slide'+$(this).attr('id')).toggleClass('visible'); // shows it
 $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );  // fades it in

请改为尝试：

$(document).ready(function () {
  $('.gallery_button img').click(function () {
    var id = this.id;
    $('.gallery_caption').hide();
    $('.gallery_slide').fadeOut(2000, function () {
      $('#caption' + id).show();
      $('#slide' + id).fadeIn(2000);
    });
  });
});

http://jsfiddle.net/mblase75/Utb8f/

Answer 2

我无法发表评论，但我想指出您的HTML可以通过一些审核来完成。

底部的按钮是嵌套的，因为div似乎没有结束。此外，您的其他一些div的格式为

<div />something</div>

而不是

<div>something</div>

以下是您的代码的清理版本：

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2">Caption2</div>
<div class="gallery_caption hidden" id="caption3">Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
</div>

另外，如果你想看一些现有的东西（在那里使用的东西总是很好的，并且已经经过大量人员的测试，或者只是为了了解其他人的情况）之前我已经完成了这个，我已经找到了一些流行的插件，我认为这些插件可以实现你想要实现的目标：

希望有所帮助。

修改

我已经完成并制作了一个小代码片段（幽默我与猫），以示例如何在不使用ID的情况下执行此操作，因此您可以添加新元素并交换它们而无需担心ID。

http://jsfiddle.net/Q6agB/1/（第二次编辑后） http://jsfiddle.net/Q6agB/3/（第三次修改，带评论）

保持与之相关的元素（所有图像与字幕）在一起是很好的，这样你就可以轻松地移动它们，当有人看了你的东西时（可能是你有一段时间，在你忘记了所有关于你的东西之后）代码），他们可以轻松地告诉你一直在做什么。这就是为什么我将图片与图片分组。

这是你想要实现的目标吗？

Answer 3

我很想知道如何使用原始格式对原始问题进行排序，因为这是我的第一个jquery，所以我终于设法让它工作了：

$(document).ready(function(){
$('.gallery_button').click(function(){
    var id = this.id;
    $('.gallery_caption:visible').hide();
    $('.gallery_slide:visible').fadeOut(500, function(){
        $('#slide' + id).fadeIn(5000);
        $('#caption' + id).show();
    });
    });
});

感谢大家的输入和帮助

通过单击缩略图来交换Jquery图像和标题

3 个答案: