Простейшая техника опрокидывания / наведения - PullRequest
Новая
       6

Простейшая техника опрокидывания / наведения

6 голосов
/ 06 сентября 2011

Мне любопытно узнать, что люди думают о том, что в настоящее время является наилучшим способом выполнения базового действия по переворачиванию - JQuery или CSS?

Я хочу перекат с такими состояниями:

  • Обычный: абзацы текста в DIV
  • При наведении: исчезают абзацы текста, появляется фотография, в том же положении, что и текст
  • OnMouseOut: фотография исчезает,текст исчезает обратно.

DIV и фотография имеют известные размеры.

90% эффектов прокрутки только для CSS, которые я обнаружил в Интернете, специально для меню с использованием спрайтовЭто не то, чего я добиваюсь, а остальные 10% спорят о том, является ли hover хорошей практикой.

Мне любопытно, что люди считают наиболее простой техникой в ​​наши дни - минимум кода, минимумсложность, самая совместимая.

Без добавления ролловера, HTML похож на это: 

<div id="box1">
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p>
</div>

CSS это: 

#box1 {
    width:403px;
    height:404px;
    background-image:url('../images/bio_square1.jpg');
    background-repeat:no-repeat;
    color:#fff;
}

Ответы [ 3 ]

2 голосов
/ 06 сентября 2011

Как правило, я прибегаю к jquery, если есть необходимость постепенно увеличивать / уменьшать элемент.

Мой HTML-код будет выглядеть примерно так: 

<div id="box">

   <div class="box-img">

         <img src="image.jpg"/>

   </div>

   <div class="box-text">

         Lorem ipsum

   </div>

</div>

После этого мой CSS будет работатьчто-то вроде: 

#box{
   width:500px;
   height:500px;
   padding:0;
}

   .box-img{
       position:absolute;
       opacity:0;
   }

   .box-text{
       position:absolute;
   }

И чтобы закончить, я, вероятно, буду использовать библиотеку jquery для .mouseover () или .hover (): 

$("#box").hover(
  function () {
    $(".box-img").fadeTo("100,1");
    $(".box-text").fadeTo("100,0");
  }, 
  function () {
    $(".box-img").fadeTo("100,0");
    $(".box-text").fadeTo("100,1");
  }
);

Это не может быть оптимальнымметод, но я предполагаю, что грубое представление о том, что возможно, где-то там.

Вы можете увидеть .hover () в действии на jQuery API .В демоверсии есть живой пример чего-то похожего на то, что вы можете искать, и он использует другой метод.

Надеюсь, это поможет!=) * * 1 018

0 голосов
/ 06 сентября 2011

Как уже говорили другие, для кросс-браузерной совместимости jQuery - это путь. Но если вы хотите просто CSS, вот быстрый и грязный вариант CSS3 с использованием переходов: http://jsfiddle.net/wkhQA/2/

Редактировать: из-за лени я включил префикс webkit только для переходов. Так что я думаю, что проверить это в Chrome или Safari. Извиняюсь.

0 голосов
/ 06 сентября 2011

Для кросс-браузерной совместимости, jQuery будет подходить. Кроме того, то, что вы хотите, звучит немного сложнее, чем просто изменение стиля при наведении. Например, вы связываете постепенное появление фотографии с окончанием постепенного появления абзаца. Нет никакого способа сделать это в чистом CSS.

...