Пользовательский интерфейс JQuery: часть изображения с отрицательными полями исчезает, если я его анимирую

Я делаю анимацию с пользовательским интерфейсом JQuery.

У меня есть значок, который я хочу выделить за край div, поэтому я использую отрицательные поля.

Анимация изменяет размер div и меняет цвет фона.

Однако, когда я анимирую div, области изображения за пределами div (в отрицательных полях) исчезают на время анимации.

Я изучил это, и похоже, что проблема связана с изменением размера div, а не с изменением цвета или изменением полей. Например. Все сводится к анимации свойства ширины CSS.

Я также пытался изменить связанные свойства CSS. Например, фиксация ширины изображения, установка display: block и использование position: absolute, ничего из этого не сработало.

Кто-нибудь сталкивался с этой проблемой раньше?

Ссылка здесь:

Тест Brightwide

ПРИМЕЧАНИЕ. В настоящее время находится в разработке и вообще не тестировался в IE.

И код здесь:

<!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>

jquery css png jquery-ui
person richquick    schedule 23.11.2009    source источник

Ответы (3)


arrow_upward
6
arrow_downward

Просто хотел добавить ответ здесь, а также на Boagworld.

Проблема связана с настройкой jQuery overflow:hidden; во время анимации. Есть два решения вашей проблемы:

(1) Установите overflow:visible; в своей таблице стилей. Вы можете добавить !important, если jQuery все еще переопределяет его. Я не знаю, повлияет ли это на то, как анимируется jQuery, и может ли это испортить некоторые браузеры, но попробовать стоит.

(2) Оберните DIV, который вы анимируете прямо сейчас, внутри другого тега DIV. Дайте внутреннему DIV достаточно отступов, чтобы разместить значок, а затем анимируйте внешний тег DIV. Эта опция добавляет больше разметки, но не влияет на то, как работает jQuery, поэтому, если первая из них окажется ошибочной, она гарантированно сработает.

person Community    schedule 24.11.2009
comment
Чтобы добавить, сегодня overflow:visible следует применять к классу .ui-effects-wrapper вместо перемещаемого элемента: .ui-effects-wrapper { overflow: visible !important; } - person Loki Kriasus; 14.06.2013

arrow_upward
3
arrow_downward

У меня также была эта проблема, и я не мог использовать контейнерное решение, потому что у моего элемента были границы. @dougoftheabaci был на правильном пути, но jQuery устанавливает overflow:visible в стиле элемента, поэтому таблица стилей не будет работать (даже с !important).

Но я нашел этот трюк, который отлично работает.

Из некоторых быстрых тестов вы можете обойти это, установив переполнение сразу после вызова animate():

$(myEl) .animate(...)
.css('переполнение', 'видимый');

person harpo    schedule 20.04.2010

arrow_upward
0
arrow_downward

Привет, попробуйте использовать следующее перед анимацией

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