Modify ↓
Ticket #7980 (closed bug: invalid)
Accumulating Time
| Reported by: | calmonrib@… | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | unfiled | Version: | 1.4.4 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
I'm creating a basic lightbox effect. I have a link that when I click it opens the lightbox normally, but when I click on the transparency of the Lightbox to close, it closes and it adds more time, and next time I click to close again it takes longer to disappear.
Example:
1º - Click on the link
2º - Hold open the lightbox
3º - Click on transparency to close
4º - Repeat the process 4 times or less and you'll notice it takes longer to stop disappearing.
Look full code - http://pastebin.com/Bz6Zb8Qs
or here:
<html>
<head>
<title>- Plugin jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
/****************************************************/
var scrollbody = false;
var tempoa = 600;
var tempos = 600;
var tempoav = 400;
var temposv = 400;
var opacidade = 0.7;
var altura = 400;
var largura = 600;
var texto = $("#click").attr('rel');
var link = $("#click").attr('href');
var cor = "#000";
/****************************************************/
$("body").append('<div class="teste"></div><div class="box"><div class="geral"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"><embed class="video" type="application/x-shockwave-flash" src="" width="'+largura+'" height="'+altura+'"></embed></object></div><div class="titulo"></div></div>');
/****************************************************/
$(".titulo").html('<p>'+texto+'</p>');
$(".box").css({
"height" : altura+30,
"width" : largura+30
});
$(".geral").css({
"height" : altura+30,
"width" : largura+30
});
$(".teste").css({
"background-color" : cor,
"opacity" : opacidade
});
/****************************************************/
$("#click").click(function(event){
event.preventDefault();
$(".video").attr('src', link);
/****************************************************/
/*if (scrollbody == false){
$("body").css({
"overflow" : "hidden"
});
} else {
$("body").css({
"overflow" : "visible"
});
}*/
/****************************************************/
$(".teste").fadeIn(tempoa, function(){
$(".box").fadeIn(tempoav, function(){
$(".box").animate({
height: '+=50'
}, 300, 'linear', function(){
$(".titulo").fadeIn('slow');
});
});
});
/****************************************************/
$(".teste").click(function(){
$(".teste").fadeOut(tempos, function(){
$(".titulo").fadeOut(temposv, function(){
$(".box").animate({
height: altura+30
}, 300, 'linear', function(){
/*if (scrollbody == false){
$("body").css({
"overflow" : "visible"
});
}*/
$(this).fadeOut(temposv);
});
});
});
});
/****************************************************/
});
});
</script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.teste {
position:fixed;
width:100%;
height:100%;
top: 0;
left: 0;
z-index:9999;
display: none;
}
.fundo {
height: 600px;
width: 800px;
margin: auto;
}
.box {
position: fixed;
background-color: #000;
z-index: 9999;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 9px;
-o-border-radius: 9px;
-icab-border-radius: 9px;
-khtml-border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
padding: 10px;
}
.geral {
background-color:#fff;
margin: auto;
border-radius: 9px;
-o-border-radius: 9px;
-icab-border-radius: 9px;
-khtml-border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
}
.video {
margin-top: 15px;
}
.titulo{
height: 30px;
width: 600px;
color: #FFFFFF;
padding-top: 5px;
display: none;
}
</style>
</head>
<body>
<div class="fundo">
<a href="http://www.youtube.com/v/OigUqkBEV5w" id="click" rel="Darwinismo - Parte 1">Darwinismo - Parte 1</a>
<br /><p></p>
</div>
</body>
</html>
Change History
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
Note: See
TracTickets for help on using
tickets.
This bug report contains way too much code to be easily debuggable. Also it is based on jQuery 1.4.2 (the current stable is 1.4.4. The beta 1.5b1 is also available).
If you are sure this is a jQuery bug please provide a reduced test case according to the [ Bug reporting guidelines. And we will happily reopen the ticket and investigate the issue further.
If this was meant to be a support request: The jQuery bug tracker is not for support requests. Please use the jQuery Forum for support requests or try the #jquery irc channel on freenode