Javascript Jquery动画最初在Safari中失败
我有一个画廊，点击缩略图时会执行一系列动画。其中一个动画——调整包含块的大小——在IE/Firefox中工作正常，但在Safari中最初失败，然后在随后的单击中工作正常。在网站的“安装”页面上使用类似脚本的图库也遇到了同样的问题，只是在那里它无法计算正确的宽度 我已经尝试从Javascript Jquery动画最初在Safari中失败,javascript,jquery,safari,Javascript,Jquery,Safari,我有一个画廊，点击缩略图时会执行一系列动画。其中一个动画——调整包含块的大小——在IE/Firefox中工作正常，但在Safari中最初失败，然后在随后的单击中工作正常。在网站的“安装”页面上使用类似脚本的图库也遇到了同样的问题，只是在那里它无法计算正确的宽度 我已经尝试从$（document.ready（）切换到$（window.load（）），但没有成功。我渴望一个解决方案；由于这个问题，这个项目被推迟了，我不是一个开发人员，所以我不知道会出什么问题。如果有任何帮助，我将不胜感激 。有关守则
$（document.ready（）$（window.load（）$(window).load(function() {
$('#back').hide();
$('#full-wrap').hide();
$('#thumb-wrap a').children().not('img').hide();//hide image captions
var moveIt = $('#thumb-wrap').outerWidth(); //Get the width of the thumb-wrap div
/*if ($.browser.webkit) {
var moveIt = $('#thumb-wrap').css({width: '100%'});
$('#full-wrap').width(383);
}*/
$('#thumb-wrap a').click(function(){
var $big = $(this).index(); //get 0-based index of the thumb that was just clicked
$('#ajax-content > h1').hide();//hide the page title
$('#thumb-wrap').hide(); //hide the thumbnails
$(this).children().not('img').clone().appendTo($('#gallery-wrap')).wrapAll('<div class="article"/>').delay(600).fadeIn(); //Clone the image captions and wrap them in an article
$('#back').fadeIn(500); //make the back button appear
$('#full-wrap img').eq($big).siblings().hide(); //Hide all fullsized images that don't match the index of the clicked thumb
$('#full-wrap img').eq($big).show(); //reveal fullsized image that does match the index of the clicked thumbnail
$('#content').animate({'maxWidth': '+=' + moveIt * 0.5 + 'px', 'left': '6%'}, 'slow');
$('#full-wrap').show(100).animate({ 'right': '+=' + moveIt * 0.75 + 'px'}, 'slow'); //slide out by a distance equal to the width of thumb-wrap.
});
$('#back').click(function(){
$(this).fadeOut();//hide the back button
$('.article').remove();//remove the article div
$('#full-wrap').animate({'right': '0', 'opacity' : 'toggle'}, 400);//hide the fullsize image div
$('#content').animate({'maxWidth': moveIt, 'left' : '43%'}, 400);
$('#thumb-wrap').delay(500).fadeIn(500);//reveal the thumbnails
$('#ajax-content > h1').delay(500).fadeIn(100);//show the page title
});
});
<div id="gallery-wrap">
<a href="#" id="back"><h3>Back</h3></a>
<div id="thumb-wrap">
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/11t.jpg" alt="DC1F" />
<h1>DC1F</h1>
<p>Material: Merino wool, raw silk, silk gauze, cashmere, wild silk, raw linen and silk yard.</p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/6t.jpg" alt="DC2F" />
<h1>DC2F</h1>
<p>Material: Merino wool, silk organza, and wild silk.</p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/10t.jpg" alt="DC3F" />
<h1>DC3F</h1>
<p>Material: Silk organza, merino wool, handspun wool and silk, and raw silk. Dyed with color derived from weld.</p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/8t.jpg" alt="DC4F" />
<h1>DC4F</h1>
<p>Material: Merino wool, silk organza, raw silk, raw linen, and Wensleydale wool. Dyed with color derived from onion skins. </p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/18t.jpg" alt="DC5F" />
<h1>DC5F</h1>
<p></p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/9t.jpg" alt="DC6F" />
<h1>DC6F</h1>
<p>Material: Merino wool, silk chiffon, raw silk, and raw linen.</p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/22t.jpg" alt="DC7F" />
<h1>DC7F</h1>
<p>Material: Natural yak hair, merino wool, raw silk, and handspun silk.</p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/23t.jpg" alt="DC9F" />
<h1>DC9F</h1>
<p>Material: Merino wool, raw silk, silk organza, and raw linen.
Dyed with color derived from weld.</p>
</a>
<a href="#">
<img src="http://www.qp2creative.com/clients/dfrank/images/19t.jpg" alt="DC10F" />
<h1>DC10F</h1>
<p>Material: Merino wool, silk chiffon, and raw silk. Yellow is dyed with color derived from weld.</p>
</a>
</div>
<div id="full-wrap">
<img src="http://www.qp2creative.com/clients/dfrank/images/11.jpg" alt="DC1F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/6.jpg" alt="DC2F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/10.jpg" alt="DC3F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/8.jpg" alt="DC4F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/18.jpg" alt="DC5F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/9.jpg" alt="DC6F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/22.jpg" alt="DC7F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/23.jpg" alt="DC9F" />
<img src="http://www.qp2creative.com/clients/dfrank/images/19.jpg" alt="DC10F" />
</div>
$（窗口）.load（函数（）{
$（'#back'）.hide（）；
$（'full wrap'）.hide（）；
$（'#拇指环绕a'）.children（）.not（'img'）.hide（）；//隐藏图像标题
var moveIt=$（'#thumb wrap'）。outerWidth（）；//获取thumb wrap div的宽度
/*如果（$.browser.webkit）{
var moveIt=$（'#thumb wrap'）.css（{width:'100%}）；
$（##全套“）。宽度（383）；
}*/
$（“#拇指环绕a”）。单击（函数（）{
var$big=$（this.index（）；//获取刚刚单击的拇指的基于0的索引
$（'#ajax content>h1'）.hide（）；//隐藏页面标题
$（“#拇指环绕”）.hide（）；//隐藏缩略图
$（this）.children（）.not（'img'）.clone（）.appendTo（$（'#gallery wrap'））.wrapAll（''）.delay（600）.fadeIn（）；//克隆图像标题并将其包装在文章中
$（“#后退”）.fadeIn（500）；//显示后退按钮
$（'#full wrap img'）.eq（$big）.sides（）.hide（）；//隐藏所有与单击的拇指索引不匹配的完整图像
$（'#full wrap img'）.eq（$big）.show（）；//显示与单击的缩略图索引匹配的完整图像
$（'#content'）。动画（{'maxWidth'：'+='+moveIt*0.5+'px'，'left'：'6%'），'slow'）；
$（'full wrap'）.show（100）.animate（{'right'：'+='+moveIt*0.75+'px'}，'slow'）；//滑出一段与拇指缠绕宽度相等的距离。
});
$（'#返回'）。单击（函数（）{
$（this）.fadeOut（）；//隐藏后退按钮
$（'.article'）.remove（）；//删除项目div
$（'full wrap'）。设置动画（{'right'：'0'，'opacity'：'toggle'}，400）；//隐藏全尺寸图像div
$（“#content”）.animate（{'maxWidth'：moveIt，'left'：'43%'），400）；
$（“#拇指环绕”）.delay（500）.fadeIn（500）；//显示缩略图
$（'#ajax content>h1'）.delay（500）.fadeIn（100）；//显示页面标题
});
});
if（$.browser.webkit）安装