jQuery图像不会爆炸 [英] jQuery image doesn't .explode
本文介绍了jQuery图像不会爆炸的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的网站添加一些非常基本的jQuery.我想在单击时爆炸一些气球的图像.我尝试按照对另一个问题的回答中的建议在该部分增加高度，但是仍然无法正常工作...
I'm working on adding some very basic jQuery to my website. I want to explode an image of some balloons when it's clicked. I tried adding a height to the section as suggested in the answer to another question but it still doesn't work...
我尝试过的其他效果，例如fadeOut，效果很好...
Other effects I try on it, like fadeOut, work fine...
请帮助！
script.js:
script.js:
//fadeIn blue flower
$(document).ready(function(){
$('#blue_flower').hide().fadeIn('slow');
});
//fadeOut clover
$(document).ready(function(){
$('#four_leaf_clover').click(function(){
$(this).fadeOut('slow');
});
});
//explode baloons
$(document).ready(function(){
$('#balloons').click(function(){
$(this).hide("explode", {pieces:16}, 5000);
});
});
index.html:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website Design and Development by Melanie Martin</title>
<meta charset="utf-8" />
<meta name="author" content="Melanie Martin" />
<meta name="description" content="Content based website design and development services." />
<meta name="keywords" content="webstie design, web design, web development, kansas city, Melanie Martin" />
<script src="jquery-1.9.1.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="baseline.css" type="text/css" />
<link rel="stylesheet" href="template.css" type="text/css" />
<!--lets older browsers see the cool new html5 tags-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section id="CorkBoard" class="leftsection">
<section class="oi">
<section id="Melanie_photo">
<a href="about.html"><img class="melanie_photo" src="images/melanie.png" alt="Melanie Martin" /></a>
</section>
<section id="blue_flower">
<img id="blue_flower" src="images/blue_flower.png" alt="Click the flower!" />
</section>
<section id="business_card">
<a href="contact.html"><img class="business_card" src="images/business_card.png" alt="Contact Melanie Martin" /></a>
</section>
<section id="four_leaf_clover">
<img id="four_leaf_clover" src="images/four_leaf_clover.png" alt="Click the clover!" />
</section>
<section id="balloons">
<img id="balloons" src="images/baloons.png" alt="Click the balloons!" />
</section>
<!--<section id="html5_badge">
<a href="http://www.w3.org/html/logo/"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-solo.png" width="63" height="64" alt="HTML5 Powered" title="HTML5 Powered"></a></a>
</section>-->
<!--<section id="weather_widget">
</section>
<ul>
<li>Weather gadget</li>
<li>Lock with "code" as the combo (will link to code samples)</li>
<li>Blue ribbon with W3C Validated on it (with W3C link)</li>
<li>Stationary "Special Deals" link / emblem</li>
<li>Contact Me Button</li>
<li>Drawing of Lilo</li>
<li>
</ul>-->
</section>
</section>
<section id="DryEraseArea" class="rightsection">
<section class="oi">
<nav id="PostIt">
<nav class="oi">
<section id="pink_post-it" class="post-it"><a href="index.html"><img src="images/pink-up.png" alt="Home Page" ></a></section>
<section id="blue_post-it" class="post-it"><a href="projects.html"><img src="images/blue-down.png" alt="Projects Page"></a></section>
<section id="green_post-it" class="post-it"><a href="about.html"><img src="images/green-down.png" alt="About Melanie Martin"></a></section>
<section id="purple_post-it" class="post-it"><a href="contact.html"><img src="images/purple-down.png" alt="Contact Melanie Martin"></a></section>
</nav>
</nav>
<section id="DryErase" class="rightsection">
<section class="oi">
<h1>Woohoo! You made it here!</h1>
<p>Hooray! You found the site where Melanie shows off all her cool projects and recent freelance work! Take a look around the site<!--, read some articles,--> and let us know what you think.</p>
<h2>Melanie Offers Freelance Services in a Variety of Areas</h2>
<h3>Website Design</h3>
<p>Melanie specializes in content centered design. Nothing is more important than the message you want to convey to your visitors. That's why she starts with your articles and images and builds a custom website around them. The site is just the pretty packaging that shows off all your cool stuff.</p>
<h3>Social Media Integration</h3>
<p>Add social media like Facebook, Twitter, LinkedIn, Stumble, Reddit and others to your site to increase traffic and make the most of your advertising budget. Social media also gets your visitors involved and benefits your search engine ranking.</p>
<h3>Website Redesign</h3>
<p>An outdated site can put visitors off and give your company a poor image. Melanie recommends taking a fresh look at your current site at least once every three years. Sometimes an entire redesign is needed but often just a little "face lift" can get you the results you need.</p>
<h3>Website Maintenance & Monitoring</h3>
<p>Melanie offers solutions for all your web needs. When you don't have the time or desire to update content, deal with host issues like setting up users and email addresses, and monitor your sites traffic, she can customize a plan to take care of it for you. There's no need to worry because she can cover it all. </p>
<h3>Free Consultations</h3>
<p>Consultations are always free. Whether it's a large or small project doesn't matter just give us a shout and we'll give you free advice, recommendations, or estimates.</p>
</section>
</section>
</section>
</section>
<footer class="oi">
<section>
<!--<p>Copyright bagdge goes here.</p>-->
</section>
</footer>
</body>
</html>
template.css:
template.css:
/*Cork Background*/
html {
background:tan;
background-image:url(images/corkboard.jpg);
min-width:1100px;
max-width:1400px;
padding:none;
margin:none;
border:none;
}
@font-face {
font-family: popstarAutograph;
src: url(popstarAutograph.otf);
}
h2 {
font-family:popstarAutograph;
font-weight:bold;
}
#DryErase .oi {
font-family:popstarAutograph;
font-weight:bold;
color:navy;
font-size:2em;
line-height:1.125;
}
/*Cork Board Area*/
#CorkBoard {
float:left;
width:33%;
min-width:325px;
}
#CorkBoard .oi {
min-height:+VALUE;
margin:+VALUE;
padding:+VALUE;
background:VALUE;
border:VALUE;
}
#CorkBoard img {
margin:20px;
}
#business_card {
float:right;
}
#html5_badge {
margin:100px 0 0 0;
}
#blue_flower {
height:130px;
width:100px;
float:right;
}
#four_leaf_clover {
height:30px;
width:25px;
float:left;
}
section #balloons{
height:500px;
width:350px;
border:5px solid;/*added for debugging*/
}
#balloons img{
height:200px;
width:175px;
float:right;
border:5px solid;/*added for debugging*/
}
/*Post-it and Dry Erase Board*/
#DryEraseArea {
float:right;
width:66%;
min-width:720px;
}
#DryEraseArea .oi {
min-height:+VALUE;
margin:+VALUE;
padding:+VALUE;
background:VALUE;
}
/*Dry Erase Post-it Menu*/
#PostIt {
float:VALUE;
min-width:720px;
height:140px;
max-height:140px;
}
#PostIt .oi {
min-height:+VALUE;
margin:+VALUE;
padding:+VALUE;
background:plum;
}
.post-it img {
height:140px;
width:;
float:left;
}
#pink_post-it img {
margin-left:20px;
margin-top:;
}
/*Dry Erase Board Area */
#DryErase {
float:VALUE;
}
#DryErase .oi {
min-height:+VALUE;
margin-top:-42px;
padding:25px 35px 35px 35px;
background:white;
border-radius:15px;
border:VALUE;
}
/*Contact Page*/
#contactpostit {
width:150px;
float:right;
}
/*Projects Page*/
#projects {
margin:0 25px 0 25px;
}
#projects img{
vertical-align:text-top;
margin:-35px 10px 75px 10px;
width:250px;
}
/*Contact*/
#contact #contactpostit {
float:right;
margin:45px 15px 15px 15px;
width:150px;
}
/*Footer*/
footer {
float:VALUE;
width:100%;
min-width:VALUE;
max-width:VALUE;
}
footer .oi {
min-height:+VALUE;
margin:+VALUE;
padding:+VALUE;
background:VALUE;
clear:both;
}
推荐答案
与其他几种 hide 效果一样，您需要jQuery UI来添加 explode 效果:
Like several other hide effects, you need jQuery UI to add the explode effect:
将此添加到您的 script 标签:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
请参见 jQuery UI效果.
这篇关于jQuery图像不会爆炸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
