Форум

kefalia · #1 (**permalink**) 26.04.2014, 20:55

Добрый вечер. Была задача: при наведении div-обертка и вложенный в него div должны были изменяться (обертка менять фон, а вложенный div - размер).

Сделала так:

$(document).ready(function(){
    $('#usluga-1').hover(
        function(){
            $(this).css('background-image','url(/images/uslugi-pictures/uslugi-7-1.jpg)');
            $('#usluga-1 #black-rect').css('-webkit-transform','scale(1.1)');
            $('#usluga-1 #black-rect').css('-moz-transform','scale(1.1)');
            $('#usluga-1 #black-rect').css('-o-transform','scale(1.1)');
        },
        function(){
            $(this).css('background-image','url(/images/uslugi-pictures/uslugi-7.jpg)');
            $('#usluga-1 #black-rect').css('-webkit-transform','');
            $('#usluga-1 #black-rect').css('-moz-transform','');
            $('#usluga-1 #black-rect').css('-o-transform',''); 
        }
    );
     $('#usluga-2').hover(
        function(){
            $(this).css('background-image','url(/images/uslugi-pictures/uslugi-6-1.jpg)');
            $('#usluga-2 #black-rect').css('-webkit-transform','scale(1.1)');
            $('#usluga-2 #black-rect').css('-moz-transform','scale(1.1)');
            $('#usluga-2 #black-rect').css('-o-transform','scale(1.1)');
        },
        function(){
            $(this).css('background-image','/images/uslugi-pictures/uslugi-6.jpg)');
            $('#usluga-2 #black-rect').css('-webkit-transform','');
            $('#usluga-2 #black-rect').css('-moz-transform','');
            $('#usluga-2 #black-rect').css('-o-transform',''); 
        }
    );

HTML

<div id="usluga-1">
<div id="black-rect">
<div>Текст</div>
</div>
</div>
<div id="usluga-2">
<div id="black-rect">
<div>Текст</div>
</div>
</div>

CSS

#black-rect{
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
}

Все работает.

Вопрос: как можно сократить данный монструозный код, чтобы не стыдно было его отдать заказчику вместе с сайтом?

Спасибо!

Vlasenko Fedor · #2 (**permalink**) 26.04.2014, 21:48

Сообщение от kefalia

чтобы не стыдно было его отдать заказчику

переписать все в CSS

alex.vv · #3 (**permalink**) 26.04.2014, 22:06

Сообщение от Poznakomlus

переписать все в CSS

+1
Переходите на CSS и классы, а то получается забивание гвоздей микроскопом.

ruslan_mart · #4 (**permalink**) 27.04.2014, 18:27

http://learn.javascript.ru/play/bHvCJ

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      .main {
        background: #AAA;
        height: 200px;
        padding: 20px;
        width: 200px;
      }
      .main-child {
        background: #DDD;
        border: 1px solid red;
        height: 50px;
        width: 50px;
      }
      .main:hover {
        background: #BBB;
      }
      .main:hover .main-child {
        transform: scale(1.1);
        -moz-transform: scale(1.1);
        -o-transform: scale(1.1);
        -webkit-transform: scale(1.1);
      }
    </style>
  </head>
  
  <body>
    <div class="main">
      <div class="main-child">Test</div>
    </div>
  </body>

</html>

Форум

Справочник

Discord чат

Курсы javascript