jquery - Cross-fade div on mouse hover -

-

i want background image change when mouse hovers on each menu item. code works but, when images fadeout , fadein, there white flash in between. remove it, want images cross-fade instead of fading out , in.

how can achieve this?

$(document).ready(function() {     $(".home-menu-list li a").mouseenter(function() {       var bannerclass = '#home-banner-' + $(this).attr('id');       $('.active-banner').not(bannerclass).stop().fadeout().removeclass('active-banner');       $(bannerclass).stop().fadein().addclass('active-banner');     });   });
.main-banner-wrapper img {    height: 50px;    width: 100%;    object-fit: cover;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="container-fluid ">    <div id="home-banner-1" class="active-banner">      <div class="main-banner-wrapper">        <img src="http://farm6.staticflickr.com/5145/5576437826_940f2db110.jpg" alt="image 1" class="upload">      </div>      <div class="col-md-4 col-sm-6  visible-lg visible-md visible-sm  front-text">        <p>thethe world.</p>      </div>    </div>    <div id="home-banner-2" style="display:none">      <div class="main-banner-wrapper">        <img src="http://farm4.staticflickr.com/3611/3463265789_586ce40aef.jpg" class="upload">      </div>      <div class="col-md-4 col-sm-6  visible-lg visible-md visible-sm  front-text">        <p>thethe world.</p>      </div>    </div>    <div id="home-banner-3" style="display:none">      <div class="main-banner-wrapper">        <img src="http://farm6.staticflickr.com/5263/5601183065_f88a48d599.jpg" class="upload">      </div>      <div class="col-md-4 col-sm-6  visible-lg visible-md visible-sm  front-text">        <p>the around world.</p>      </div>    </div>  </div>  <!--content-->  <div class="container-fluid">    <div class="main-logo-panel">      <div class="box">        <div class="col-md-12 col-sm-12 ">          <div class="col-md-3 col-sm-3 col-xs-4 main-logo"></div>          <div class="col-md-9 col-sm-9 col-xs-8 main-menu">            <ul class="list-inline home-menu-list">              <li><a href="#" id="1">rigging</a>              </li>              <li><a href="#" id="2">hatches </a>              </li>              <li><a href="#" id="3">stoppers</a>              </li>            </ul>          </div>        </div>      </div>    </div>  </div>

view on jsfiddle

you can achieve same using css.

some small css changes:

add transition: opacity 1s ease-in-out; .main-banner-wrapper img

and add following css:

.container-fluid .active-banner img {     opacity:1; }  .container-fluid img {     opacity:0; }

and remove .fadeout() , .fadein()from jquery

see example on http://jsfiddle.net/m92aotbd/2/


Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more