如何在jquery中一起启动fadein和fadeout效果 [英] how to start fadein and fadeout effect together in jquery
问题描述
我正在使用以下代码在手动幻灯片显示类型的图片库中的图像之间实现淡入淡出效果.通常，在前一张图片的淡入淡出效果完成后开始的下一张图片的淡入淡出效果，因此它们之间的间隔很小.我想知道是否可以同时开始两个图像的淡入淡出和淡入淡出，以使图像看起来像在过渡期间彼此融合在一起.
I am using the following code for fade effect between images in my manual slideshow type photo gallery. Normally, fadein effect of the next image starting after the fadeout effect of the previous picture finishes so there is very slight gap in between. I am wondering if it is possible to start fadeout and fadein of two images at the same time so that the pictures look like they are blending in each other during transition.
此外，此代码可与Firefox和Chrome完美配合，但不适用于IE8.IE不会显示下一张图像的淡入效果，并且图像会突然显示.
Also, this code works perfectly with Firefox and Chrome but it doesn't work properly with IE8. IE doesn't show fadein effect of the next image and the image shows up suddenly.
我对代码不是很好，因此在回答时请记住这一点.这是整个页面；
I am not very good with codes so please keep that in mind while answering. Here is the whole page;
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
theimage = new Array();
theimage[0]=["/images/portrait/image1.jpg", "", "Image Title 1"];
theimage[1]=["/images/portrait/image2.jpg", "", "Image Title 2"];
theimage[2]=["/images/portrait/image3.jpg", "", "Image Title 3"];
theimage[3]=["/images/portrait/image4.jpg", "", "Image Title 4"];
theimage[4]=["/images/portrait/image5.jpg", "", "Image Title 5"];
theimage[5]=["/images/portrait/image6.jpg", "", "Image Title 6"];
theimage[6]=["/images/portrait/image7.jpg", "", "Image Title 7"];
theimage[7]=["/images/portrait/image8.jpg", "", "Image Title 8"];
///// Plugin variables
playspeed=0;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;
//###########################################
window.onload=function(){
//preload images into browser
preloadSlide();
SetSlide(0, true);
}
//###########################################
function SetSlide(num, titleOnly) {
if (!titleOnly) {
//switch the image
var img = $("#imgslide");
// don't interrupt an image in transition
if (img.data("inTransition")) {
return;
}
img.data("inTransition", true);
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;
img.stop(true).animate({opacity: 0}, 300, function() {
img.attr("src", theimage[i][0]);
img.animate({opacity: 1}, 300, function() {
img.data("inTransition", false);
});
})
}
//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];
//if they want current slide number and total
document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;
}
//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][3]=new Image().src=theimage[k][0];
}
}
</script>
<!-- slide show HTML -->
<form name="slideshow">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td align="left">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</td>
</tr>
<tr>
<td align="left"><div id="slidebox"></div></td>
</tr>
<tr>
<td height="30px" align="left" valign="bottom">
<a style="text-decoration:none;" href="javascript:SetSlide(i-1);" onfocus="this.blur()">Prev</a> |
<a style="text-decoration:none; margin-left:2px"; href="javascript:SetSlide(i+1);" onfocus="this.blur()">Next</a>
<div style="display:inline; margin-left:10px" align="left" id="slidecount"></div>
</td>
</tr>
</table>
</form>
<!-- end of slide show HTML -->
</body>
</html>
谢谢！...
推荐答案
您可以像这样很容易地同时启动两个或多个效果:
You can start two or more effects at the same time very easy like this:
$('#image_1').fadeOut();
$('#image_2').fadeIn();
这将使它们融合"，因为它在淡出第二张图像的同时淡出了第一张图像.这仅适用于两个或更多图像.在您的情况下，您正在更改一个图像标签的来源.淡入淡出时无法完成此操作.因此，它们永远不会真正融合在一起.您可以尝试这样的事情:
This will sort of "blend" them as it fades out the first image at the same time of the fade in the second. This will work only on two or more images. In your case you're changing the source of one image-tag. This can't be done while fading. So they never really blend over. You could try something like this:
<div>
<img id="image_1" src="images_1.jpg" alt="">
<img id="image_2" src="images_2.jpg" alt="">
</div>
以及上面的代码.还请记住，此解决方案仅在图像放置相同时才有效.因此，使用此CSS，您几乎可以完成工作:
with the code from above. Also keep in mind, that this solution works only when the images are positioned the same. So with this CSS you're nearly complete:
div {
position:relative;
}
div > img {
position:absolute;
}
我希望这可以帮助您解决问题.
I hope this helps you solving your problem.
PS:您当然可以使用不透明的动画来代替fadeIn/fadeOut.
PS: Instead of fadeIn/fadeOut you can of course use animate with opacity.
编辑
首先:不要将表格用于布局.这不是一个好习惯.使用其他HTML元素，您几乎可以实现所有功能.
First of all: Do not use tables for layouts. It's not a good practice. You can achieve almost everything with other HTML-elements.
这是您问题的有效简短版本.您只需要添加超时后滑动的功能即可.在此示例中，仅按钮起作用.我还添加了一些语义，该语义对Google友好得多，因为它具有所有图像，包括alt和title标签.因此，搜索引擎也知道您要显示的内容.:)
This is a working, short version of your problem. You just have to add the functionality to slide after a time out. In this example only the buttons work. I also added some semantics and this one is much more google friendly as it has all images right away including an alt and title tag. So a search engine also knows, what you're displaying. :)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Title</title>
<style>
div.images {
position:relative;
}
div.images > img {
position:absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
// define global variable to store images
var images = null;
// store current element
var current = 0;
// title
var title = null;
// create function to slide
function setSlide(num) {
// if to small set bigeest value
if (0 > num) {
num = images.length - 1;
}
// if to big reset to 0
if (current.lengtt == num) {
num = 0;
}
// fade out current
images.eq(current).fadeOut();
// set current to new num
current = num
// fade in new image
images.eq(current).fadeIn();
// set new title
title.text( images.eq(current).attr('title') );
}
$(document).ready(function () {
// load all images within the container '<div id="images"> into an array
images = $('#images > img');
// store the field for the title
title = $('#image_title');
// print out the count of the array
$('#slidecount').text( images.length );
// add click handler to the prev and next buttons
$('#prev').click( function() {
setSlide(current - 1);
});
$('#next').click( function() {
setSlide(current - 1);
});
});
</script>
<head>
<body>
<nav>
<a id="prev">Prev</a> |
<a id="next">Next</a>
<span id="slidecount"></span>
</nav>
<aside id="image_title"></aside>
<div id="images" class="images">
<img src="content/dummy/content_product_container_1.png" alt="Image Description 1" title="Image Description 1">
<img src="content/dummy/content_product_container_2.png" alt="Image Description 2" title="Image Description 2">
<img src="content/dummy/content_product_container_3.png" alt="Image Description 3" title="Image Description 3">
</div>
</body>
</html>
我希望这些评论对您有所帮助.请注意，在此示例中可以对某些内容进行优化.我试图发布最容易理解的示例.
I hope that the comments will help you. Please note, that some things could be optimized in this example. I tried to post the easiest to understand example.
这篇关于如何在jquery中一起启动fadein和fadeout效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
