1. Zuhause
  2. Frage und Antwort
  3. JQuery UI: Teil eines Bildes mit negativen Rändern verschwindet, wenn ich es animiere

JQuery UI: Teil eines Bildes mit negativen Rändern verschwindet, wenn ich es animiere

2009-11-23 3 views
5

Ich mache eine Animation mit JQuery UI.JQuery UI: Teil eines Bildes mit negativen Rändern verschwindet, wenn ich es animiere

Ich habe ein Symbol, das ich über den Rand des div hinausstrecken möchte, also verwende ich negative Ränder.

Die Animation ändert die Größe des Div und ändert die Hintergrundfarbe.

Wenn ich jedoch das div animiere, verschwinden die Bereiche des Bildes außerhalb des div (in den Negrändern) für die Dauer der Animation.

Ich habe es untersucht, und es scheint, dass das Problem von der Größenänderung des div kommt, nicht die Farbänderung oder die Randänderung. Z.B. Es geht darum, die CSS-Eigenschaft width zu animieren.

Ich habe auch versucht, verwandte CSS-Eigenschaften zu ändern. Zum Beispiel, Fixieren der Breite des Bildes, Einstellung display: block und mit position: absolute, von denen keiner gearbeitet hat.

Wer ist schon mal auf dieses Problem gestoßen?

Der Link lautet hier:

Brightwide Test

HINWEIS: Derzeit in dev und schon gar nicht in IE getestet.

Und der Code ist hier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Act Now</title> 
</head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js"></script> 
<script type="application/javascript" language="javascript"> 
$(document).ready(function() { 


/* Act Now Page - sponsor section mousover effect */ 
$('#an-sponsors').hover(
function() { 
    $(this).children().children('ul').animate({backgroundColor: "#E8F0E5", webkitBoxShadow: "2px 2px 6px rgba(212,212,212,1)", MozBoxShadow: "2px 2px 6px rgba(212,212,212,1)"}, {queue:false,duration:500}); 
}, function() { 
    $(this).children().children('ul').animate({backgroundColor: "#fff", webkitBoxShadow: "2px 2px 6px rgba(212,212,212,0)", MozBoxShadow: "2px 2px 6px rgba(0,0,0,0)"}, {queue:false,duration:500}); 
}); 

/* Expanding boxes */ 
    $('.fadeThis').hover(
function() { 
    $(this).animate({backgroundColor: "#E8F0E5", marginLeft: "-1%", width: "31%", paddingBottom: "25px"}, {queue:false,duration:500}); 
    $(this).children().children('li').animate({paddingRight:"30px"}, {queue:false,duration:500}); 
    $(this).children().children('.alt').animate({backgroundColor: "#DAEAD3"}, {queue:false,duration:500}); 
    $(this).children('h3').animate({backgroundColor: "#68B744"}, {queue:false,duration:500}); 
}, function() { 
    $(this).animate({backgroundColor: "#fff", marginLeft: "0", width: "29%", paddingBottom: "10px"}, {queue:false,duration:500}); 
    $(this).children().children('li').animate({paddingRight:"10px"}, {queue:false,duration:500}); 
    $(this).children().children('.alt').animate({backgroundColor: "#f2f2f2"}, {queue:false,duration:500}); 
    $(this).children('h3').animate({backgroundColor: "#666"}, {queue:false,duration:500}); 
}); 



    $('.fadeThis2').hover(
function() { 
    $(this).animate({backgroundColor: "#E8F0E5", marginLeft: "-1%", width: "31%", paddingBottom: "25px"}, {queue:false,duration:500}); 
    $(this).children().children('li').animate({paddingRight:"30px"}, {queue:false,duration:500}); 
    $(this).children().children('.alt').animate({backgroundColor: "#DAEAD3"}, {queue:false,duration:500}); 
    $(this).children('h3').animate({backgroundColor: "#68B744"}, {queue:false,duration:500}); 
}, function() { 
    $(this).animate({backgroundColor: "#fff", marginLeft: "0", width: "29%", paddingBottom: "10px"}, {queue:false,duration:500}); 
    $(this).children().children('li').animate({paddingRight:"10px"}, {queue:false,duration:500}); 
    $(this).children().children('.alt').animate({backgroundColor: "#f2f2f2"}, {queue:false,duration:500}); 
    $(this).children('h3').animate({backgroundColor: "#666"}, {queue:false,duration:500}); 
}); 


    /* Tabs */ 
/* Credit: http://www.viget.com/inspire/fun-with-jquerys-animation-function/ */ 

var navDuration = 150; //time in miliseconds 
     var navJumpHeight = "0.45em"; 

     $('#tabs li').hover(function() { 
      $(this).animate({top : "-="+navJumpHeight }, navDuration); 
    $(this).children('a').animate({borderColor: "#DAEAD3", backgroundColor: "#E8F0E5" }, navDuration); 
     }, function() { 
      $(this).animate({ top : "15px" }, navDuration); 
    $(this).children('a').animate({borderColor: "#ddd", backgroundColor: "#fff" }, navDuration); 
     }); 

}); 








/* IDEA .. have the "act" element pulsate periodically to draw attention to itself */ 

</script> 
<style> 

/* temp */ 

body { 
background:url(assets/header.jpg) repeat-x center top #f7f7f7; 
margin: 180px 0 0 0; 
} 


/* end temp */ 

.an { 
max-width: 1000px; 
min-width: 770px; 
_width: 960px; 
margin: 0 auto; 
font-size: 90%; 
font-family: Helvetica, Arial, sans-serif; 
} 

.an ul { 
margin: 0; 
padding: 10px 0 10px 15px; 
} 

.an li { 
list-style: none; 
background: url(assets/arrow.png) no-repeat 0 7px; 
margin: 0; 
padding: 3px 0 3px 15px; 
} 

.an a { 
color: #0E7FC1; 
} 

.an a:hover { 
text-decoration: none; 
} 

#an-details { 
width: 58%; 
float: left; 
font-size: 95%; 
} 

#an-details p { 
margin: 0 0 5px 0; 
} 

#an-details .casual { 
margin: 10px 0 5px 0; 
} 

#an-details h1 { 
margin: 10px 0; 
font-size: 130%; 
padding-left: 15px; 
display: inline; 
line-height: 2; 
} 

#an-sponsors { 
padding-left: 40px; 
width: 35%; 
float: right; 
background: url(assets/divider.jpg) no-repeat; 
min-height: 350px; 
_height: 350px; 
} 

#an-sponsors ul { 
width: 290px; 
background: #fff; 
border: 2px solid #fff; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
} 

#an-sponsor { 
display: block; 
overflow: hidden; 
background-repeat: no-repeat; 
background-position: center; 
text-indent: -9000px; 
width: 290px; 
} 

#an-film-still { 
float: left; 
margin: 0 15px 20px 0; 
width: 240px; 
} 

#an-description { 
clear: both; 
line-height: 1.4; 
} 

#an-description .standfirst { 
font-size: 120%; 
} 

#an-director span, #an-distributor span, #an-year span { 
font-weight: bold; 
padding-left: 15px; 
} 

#an-act-now { 
clear: both; 
} 

#an-dp { 
font-weight: bold; 
} 

#an-dp span { 
font-weight: normal; 
} 

#an-friends { 
clear: both; 
padding-top: 40px; 
font-size: 130%; 
} 

.fadeThis, .fadeThis2 { 
width: 29%; 
float: left; 
margin-right: 5%; 
background: #fffffff; 
border: 2px solid #fff; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-box-shadow: 2px 2px 6px rgba(212,212,212,1); 
-webkit-box-shadow: 2px 2px 6px rgba(212,212,212,1); 
} 


.fadeThis h3, .fadeThis2 h3 { 
font-size: 110%; 
margin: 0; 
padding: 5px 10px; 
background: #666; 
color:#FFF; 
-moz-border-radius-topright: 5px; 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-right-radius: 5px; 
-webkit-border-top-left-radius: 5px; 
} 

.fadeThis2 { 
margin-right: 0; 
} 

.ico { 
float: left; 
margin: -10px 10px 0 -10px; 

} 

ul.conversation li span { 
font-size: 80%; 
color: #999; 
display: block; 
} 


ul.conversation { 
list-style: none; 
padding: 0; 
margin: 0; 
} 

ul.conversation li { 
background-repeat: no-repeat; 
background-position: 10px 15px; 
min-height: 65px; 
list-style: none; 
padding: 10px 10px 10px 55px; 
margin: 0; 
background-image: none; 
} 

.fadeThis ul li.alt, .fadeThis2 ul li.alt { 
    background-color: #f5f5f5; 
} 

#an-act-now form textarea { 
width:100%; 
height: 100px; 
} 

#an-share { 
clear: both; 
padding: 0; 
} 

.fadeThis, .fadeThis2 { 
padding-bottom: 10px; 
} 

.casual { 
font-family: "Sean"; 
color: #666; 
-webkit-transform: rotate(-3deg); 
-moz-transform: rotate(-3deg); 
} 

#an-sponsors .casual { 
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg); 
} 

.conversation li h4 { 
font-size: 100%; 
font-weight: normal; 
font-family: "Sean"; 
color: #666; 
margin: 0; 
} 

.conversation li h4 a { 
text-decoration: none; 
color: #666; 
} 

.conversation li h4 a:hover { 
text-decoration: underline; 
color: #0E7FC1; 
} 





/* nav1 */ 
.an #tabs { 
height: 3em; 
overflow: hidden; 
padding: 0; 
margin: 30px 0 0 0; 
float: left; 
list-style: none; 
position: relative; 
clear: both; 
} 
.an #tabs li, .an #tabs li a { 
position: relative; 
float: left; 
}  
.an #tabs li { top: 15px; margin: 0 1px 0 0; background: none; padding: 0; } 
.an #tabs li a { 
display: block; 
padding: 0.4em 1.1em; 
background: #fff; 
border: 1px solid #ddd; 
border-bottom: none !important; 
color: #333; 
text-decoration: none; 
height: 195px; 
-moz-border-radius-topright: 5px; 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-right-radius: 5px; 
-webkit-border-top-left-radius: 5px; 
} 



</style> 
<body> 

<div class="an"> 
<div id="an-details"> 
    <img src="assets/screenshot-ml.jpg" alt="Still from McLibel" id="an-film-still" /> 
     <p class="casual">You have been watching...</p> 
     <h1>McLibel</h1> 
    <p id="an-director"><span>Director:</span> Franny Armstrong</p> 
     <p id="an-distributor"><span>Distributor:</span> Spanner Films</p> 
     <p id="an-year"><span>Released:</span> 1999</p> 


    <div id="an-description"> 
     <p class="standfirst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at scelerisque leo. Nullam elementum turpis id dui hendrerit eget auctor risus convallis. Aliquam erat volutpat.</p> 

      <p>Curabitur cursus, eros feugiat convallis vestibulum, diam justo aliquam arcu, sed placerat ipsum est at nisi. Donec metus mauris, fermentum et vehicula vel, euismod ut sem. Ut et tortor eget elit imperdiet gravida eget ac dolor. Ut mattis purus et mi commodo sed lacinia tellus egestas. </p> 

      </div> 
</div> 
    <div id="an-sponsors"> 
    <div id="an-sponsors-main"> 
     <p class="casual">This film was supported by the lovely people at...</p> 
     <h2 id="an-sponsor" style="background-image: url(assets/wwf_logo.jpg); height: 150px;">WWF</h2> 
      <ul> 
      <li><a href="#">Join WWF</a></li> 
       <li><a href="#">Give WWF some money</a></li> 
       <li><a href="#">Sign a petition</a></li> 
      </ul> 
     </div> 
    </div> 

    <div id="an-act-now"> 
    <h2 id="an-dp"><span class="casual">Don't Panic!</span> Take Action</h2> 

    <div id="an-talk" class="fadeThis"> 
     <img src="assets/icon-1.png" alt="#" class="ico" /> 
      <h3>Talk</h3> 
      <ul> 
      <li><a href="#">Action 1</a></li> 
       <li><a href="#">Action 2</a></li> 
       <li><a href="#">Action 3</a></li> 
      </ul> 
     </div> 

     <div id="an-think" class="fadeThis"> 
     <h3>Think</h3> 
      <ul> 
      <li><a href="#">Action 1</a></li> 
       <li><a href="#">Action 2</a></li> 
       <li><a href="#">Action 3</a></li> 
      </ul> 
     </div> 

     <div id="an-act" class="fadeThis2"> 
     <h3>Act</h3> 
      <ul> 
      <li><a href="#">Action 1</a></li> 
       <li><a href="#">Action 2</a></li> 
       <li><a href="#">Action 3</a></li> 
       <li><a href="#">Action 2</a></li> 
       <li><a href="#">Action 3</a></li> 
      </ul> 
     </div> 

     <h2 id="an-friends">Here's what your friends are saying...</h2> 

     <div id="an-social-1" class="fadeThis"> 
     <h3>Twitter</h3> 
      <ul class="conversation"> 
      <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4> 
       Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
       <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4> 
       Just watched OilSpill. Am so angry. Why would people behave like this? #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
       <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4> 
       <a href="#">richquick</a> I see what you mean. It's a discgrace. #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
      </ul> 
     </div> 

     <div id="an-social-2" class="fadeThis"> 
     <h3>Facebook</h3> 
      <ul class="conversation"> 
      <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4> 
       Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
       <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4> 
       Just watched OilSpill. Am so angry. Why would people behave like this? #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
       <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4> 
       <a href="#">richquick</a> I see what you mean. It's a discgrace. #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
      </ul> 
     </div> 

     <div id="an-social-3" class="fadeThis2"> 
     <h3>Comments</h3> 
      <ul class="conversation"> 
      <li style="background-image:url(assets/av1.jpg)"><h4><a href="#">Joanna said...</a></h4> 
       Just watched OilSpill. OMG, that is terrible. How can people do things like that? They should ban it. #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
       <li class="alt" style="background-image:url(assets/av2.jpg)"><h4><a href="#">Rich Quick said...</a></h4> 
       Just watched OilSpill. Am so angry. Why would people behave like this? #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
       <li style="background-image:url(assets/av3.jpg)"><h4><a href="#">Oli Best said...</a></h4> 
       <a href="#">richquick</a> I see what you mean. It's a discgrace. #brightwide 
    <span>at 3pm on Nov 17th</span></li> 
      </ul> 
     </div> 


     <ul id="tabs"> 
     <li><a href="#">Twitter</a></li> 
      <li><a href="#">Facebook</a></li> 
      <li><a href="#">Comment</a></li> 
      <span id="nav_move"></span> 
     </ul> 
     <form action="#" method="post" id="an-share"> 
    <textarea>Join the conversation...</textarea> 
      <button>Say it</button>  
     </form> 
    </div> 
</div> 

</body> 
</html>

Quelle

2009-11-23 richquick

Antwort

6

einfach die Antwort hier als auch auf Boagworld hinzufügen wollte.

Das Problem ist mit jQuery Einstellung overflow:hidden; während es die Animation macht. Es gibt zwei Lösungen für Ihr Problem:

(1) Set overflow:visible; in Ihrem Stylesheet. Sie können !important hinzufügen, wenn jQuery es weiterhin überschreibt. Ich weiß nicht, ob das mit der Art und Weise, wie jQuery animiert, durcheinander kommt, und es könnte einige Browser vermasseln, aber es ist einen Versuch wert.

(2) Wickeln Sie das gerade animierte DIV in ein anderes DIV-Tag ein. Geben Sie dem inneren DIV genug Auffüllung, um das Symbol unterzubringen, und animieren Sie dann das äußere DIV-Tag. Diese Option fügt mehr Markup hinzu, aber es macht keinen Fehler damit, wie jQuery die Dinge macht, wenn der erste Buggy nicht funktioniert, wird es garantiert funktionieren.

Quelle

2009-11-24 05:35:14

+0

Animieren hinzuzufügen, heute, der Überlauf: sichtbar angewandt werden soll, um .ui-Effekte-Wrapper-Klasse anstelle des Elements bewegt wird: '.ui- effects-wrapper { Überlauf: sichtbar! wichtig; } ' –

3

Ich hatte auch dieses Problem und konnte die Containerlösung nicht verwenden, weil mein Element Grenzen hatte. @dougoftheabaci war auf der richtigen Spur, aber jQuery setzt overflow:visible auf den Stil des Elements, so dass das Stylesheet nicht funktioniert (sogar mit !important).

Aber ich fand this trick, die perfekt funktioniert.

Von einigem schnellen Test können Sie das umgehen, indem Sie den Überlauf direkt nach dem belebten() Anrufeinstell-:

$ (MYEL) .animate (...)
.css ('Überlauf', 'sichtbar');

Quelle

2010-04-20 06:43:56 harpo

+0

Das funktionierte für mich. Vielen Dank. –

0

Hallo versuchen, den folllowing verwenden, bevor

$(this).dequeue().stop(). 
animate({backgroundColor: "#fff", marginLeft: "0",width: "29%", paddingBottom:"10px"}

Quelle

2012-09-21 13:16:44

 Verwandte Themen

  • Keine verwandten Themen^_^