Как ИСКЛЮЧИТЬ ребенка img с анимацией - PullRequest
Новая
       26

Как ИСКЛЮЧИТЬ ребенка img с анимацией

0 голосов
/ 07 ноября 2011

Я пробовал .not () и .parent () и несколько других методов, но я не могу понять это правильно. Это клиентский HTML / CSS, поэтому я не могу его ни изменить, ни использовать backgroundColor пользовательского интерфейса, чтобы упростить жизнь. Никакие плагины не допускаются.

У меня есть коробки с изображением в них, и мне нужно анимировать / исчезать фон родительского div без влияния на вложенные элементы.

HTML 

    <div class="content">
    <img class="rand_ico" rel="33" src="img/rand33.png" />
    <div>Green</div>
    </div>

CSS 

.content
{
position:relative;
width:126px;
height:138px;
background: #3C3C3C;
}

.rand_ico
{
margin:10px 0 9px 12px;
height: 90px;
width: 100px;
}

Jquery - неудачная попытка 

var opacity = 1, toOpacity = 0.6, duration = 250;
  //set opacity ASAP and events
    $("div.content:not(img.rand_ico)").css('content',opacity).hover(function() {
      $(this).fadeTo(duration,toOpacity);
    }, function() {
      $(this).fadeTo(duration,opacity);
    }
  );

Ответы [ 2 ]

1 голос
/ 07 ноября 2011

Поправьте меня, если я ошибаюсь, но вы не можете исключить img или любой другой тег из замирания входа / выхода, так как именно в подразделении вы применяете анимацию. Одним из возможных решений является анимация цвета фона с помощью rgba.

0 голосов
/ 01 марта 2012

Способ, которым я выполняю это, заключается в наложении изображения поверх фона с абсолютным позиционированием, так что на самом деле это не ребенок, а просто разделяющее пространство. Вам также необходимо убедиться, что z-индекс выше того, который вы хотите сверху. Если вы можете сделать это, JQuery прост. По общему признанию, отсутствие доступа к фактическому html / css является большой досадой, это все еще можно сделать, если вы используете jquery, чтобы фактически изменить его для вас.

Если вы все еще хотите это сделать, некоторые методы jquery, которые вы, вероятно, будете использовать, будут включать children (), after () и before (), next () и prev () и, конечно, вероятно fadeTo ().

Вам не нужен jquery expert, просто посмотрите разделы про обход и манипуляции в API http://docs.jquery.com/Main_Page

...