Более компактный код

188

10 декабря 2016, 10:35

$('.news-block_main').hover( 
  function() { 
    $('.news-block-hover_main').show('fast'); 
  }, 
  function() { 
    $('.news-block-hover_main').hide('fast'); 
  } 
); 
$('.news-block_2').hover( 
  function() { 
    $('.news-block-hover_2').show('fast'); 
  }, 
  function() { 
    $('.news-block-hover_2').hide('fast'); 
  } 
); 
$('.news-block_3').hover( 
  function() { 
    $('.news-block-hover_3').show('fast'); 
  }, 
  function() { 
    $('.news-block-hover_3').hide('fast'); 
  } 
); 
$('.news-block_4').hover( 
  function() { 
    $('.news-block-hover_4').show('fast'); 
  }, 
  function() { 
    $('.news-block-hover_4').hide('fast'); 
  } 
); 
$('.news-block_5').hover( 
  function() { 
    $('.news-block-hover_5').show('fast'); 
  }, 
  function() { 
    $('.news-block-hover_5').hide('fast'); 
  } 
); 
$('.news-block_6').hover( 
  function() { 
    $('.news-block-hover_6').show('fast'); 
  }, 
  function() { 
    $('.news-block-hover_6').hide('fast'); 
  } 
);

.news-blocks { 
  max-width: 1210px; 
  margin: 0 auto; 
} 
.news-list { 
  position: relative; 
  height: 676px; 
  margin-top: 10px; 
} 
.anews { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 33.33%; 
  height: 33.33%; 
} 
.news-block { 
  width: 100%; 
  height: 100%; 
  position: absolute; 
  top: 0; 
  left: 0; 
  background-color: #555; 
  background-position: center center; 
  background-size: cover; 
  overflow: hidden; 
} 
.news-block:hover h2 { 
  color: #000; 
} 
.news-block h2 { 
  font-size: 24px; 
  font-family: ProximaBold; 
  line-height: 1.2em; 
} 
.news-block-stf { 
  position: absolute; 
  margin: 90px 100px; 
} 
.news-block.news-block_main { 
  width: 200%; 
  height: 202%; 
  top: 0; 
  left: 0; 
} 
.news-block.news-block_2 { 
  top: 0; 
  left: 200%; 
  border-left: 4px solid #0e0f16; 
} 
.news-block.news-block_3 { 
  top: 100%; 
  left: 200%; 
  border-left: 4px solid #0e0f16; 
  border-top: 4px solid #0e0f16; 
} 
.news-block.news-block_4 { 
  top: 202%; 
  left: 0%; 
  border-top: 4px solid #0e0f16; 
} 
.news-block.news-block_5 { 
  top: 202%; 
  left: 100%; 
  border-top: 4px solid #0e0f16; 
  border-left: 4px solid #0e0f16; 
} 
.news-block-hover_5 img { 
  width: 398px; 
  height: 225px; 
} 
.news-block.news-block_6 { 
  top: 202%; 
  left: 200%; 
  border-top: 4px solid #0e0f16; 
  border-left: 4px solid #0e0f16; 
} 
.news-block .news-block-descr { 
  padding: 21px 20px 11px; 
  font-family: 'Roboto Condensed', 'Segoe UI', Tahoma, Arial, sans-serif; 
} 
.news-block-descr { 
  position: absolute; 
  bottom: 7%; 
  left: 0; 
  width: 95%; 
  padding: 15px 10px 8px; 
  color: #fff; 
  line-height: 1em; 
  z-index: 5; 
} 
.news-block_2 .news-block-descr, 
.news-block_3 .news-block-descr, 
.news-block_4 .news-block-descr, 
.news-block_5 .news-block-descr, 
.news-block_6 .news-block-descr { 
  bottom: 11%; 
} 
.news-block:hover .news-block-stats { 
  color: #000; 
} 
.news-block-stats span.news-comm { 
  text-decoration: underline; 
} 
.news-block-stats span { 
  font-family: ProximaLight; 
} 
.news-block .news-block-step_to_full_main, 
.news-block-step_to_full_2, 
.news-block-step_to_full_3, 
.news-block-step_to_full_4, 
.news-block-step_to_full_5, 
.news-block-step_to_full_6 { 
  opacity: 0; 
  transition: 0.3s all; 
  z-index: 10; 
} 
.news-block .news-block-step_to_full_main { 
  right: -60px; 
  margin-top: 415px; 
  position: absolute; 
} 
.news-block:hover .news-block-step_to_full_main, 
.news-block-step_to_full_2, 
.news-block-step_to_full_3, 
.news-block-step_to_full_4, 
.news-block-step_to_full_5, 
.news-block-step_to_full_6 { 
  opacity: 1; 
  transition: 0.3s all; 
  z-index: 10; 
} 
.news-banner { 
  margin-top: 15px; 
  overflow: hidden; 
} 
.news-banner img { 
  width: 1210px; 
} 
.news-block-hover_main, 
.news-block-hover_2, 
.news-block-hover_3, 
.news-block-hover_4, 
.news-block-hover_5, 
.news-block-hover_6 { 
  display: none; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="news-list"> 
  <div id="actuallynews" class="anews"> 
    <div class="news-block news-block_main " style="background-image: url(http://i.imgur.com/NG5QZQv.jpg);"> 
      <a href="#"> 
        <div class="news-block-hover_main" style="display:none;"> 
          <img src="http://i.imgur.com/XjdCeR1.png"> 
        </div> 
      </a> 
    </div> 
    <div class="news-block news-block_2" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> 
      <div class="news-block-hover_2" style="display:none;"> 
        <img src="http://i.imgur.com/0Onvos6.png"> 
      </div> 
    </div> 
    <div class="news-block news-block_3" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> 
      <div class="news-block-hover_3" style="display:none;"> 
        <img src="http://i.imgur.com/0Onvos6.png"> 
      </div> 
    </div> 
    <div class="news-block news-block_4" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> 
      <div class="news-block-hover_4" style="display:none;"> 
        <img src="http://i.imgur.com/0Onvos6.png"> 
      </div> 
    </div> 
    <div class="news-block news-block_5" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> 
      <div class="news-block-hover_5" style="display:none;"> 
        <img src="http://i.imgur.com/0Onvos6.png"> 
      </div> 
    </div> 
    <div class="news-block news-block_6" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);"> 
      <div class="news-block-hover_6" style="display:none;"> 
        <img src="http://i.imgur.com/0Onvos6.png"> 
      </div> 
    </div> 
  </div> 
</div>

Сейчас как мне кажется - он выглядит очень костыльно и неправильно, но при этом работает как мне надо. Что можно сделать с JS - чтобы это выглядело более менее нормально.

Answer 1

Update: Как заметил @Maqsood в данном случае можно обойтись вообще без использования js. Если возможно лучше использовать :hover css селектор, вместо навешивания множества js событий.

Создайте объект с селекторами, для элементов которые будете скрывать или показывать. Затем пройдитесь по нему, добавляя события.

var blocks = {
 '.news-block_main': '.news-block-hover_main',
 '.news-block_2': '.news-block-hover_2',
 //... other blocks
};
//es6
for( var selector in blocks ){ 
   //let variable will "remember" it's value when event fire.
   //it doesn't hoist (accessible only in for loop). 
   let $hover_block = $( blocks[ selector ] );
   $( selector ).hover(
       function() { $hover_block.show('fast'); },
       function() { $hover_block.hide('fast'); }
   );
}
//es5 version
for( var selector in blocks ){
   var $hover_block = $( blocks[ selector ] );
   //"var"  variable will change it value on each iteration
   // it hoist to top of function (if any). 
   //need to create separate scope for each iteration.
   ( function( $hover_block ){
       $( selector ).hover(
           function() { $hover_block.show('fast'); },
           function() { $hover_block.hide('fast'); }
       );
   }( $hover_block ) );
}

Answer 2

Я могу посоветовать использовать только CSS.

Пример моей реализации:

.my_div {
    width: 402px;
    height: 224px;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
.my_div span {
    position: absolute;
    top: 402px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.my_div:hover > span{
    top: 0;
}

HTML

<div class="my_div" style="background-image: url(http://i.imgur.com/CEyKu1J.jpg);">
    <span><img src="http://i.imgur.com/0Onvos6.png"></span>
</div>