javascript - jquery next() function not working correctly -

-

i have css animation 2 things, 1 adds opacity , 2 creates slideup animation when user hovers on specified area. having issue adding , removing opacity. not sure have gone wrong. below snippet of code.

html

<body id="body" class="preload">         <div class="box">         <div class="trigger">hhh</div>             <div class="overlay animated">                 <h1>box 1</h1>             </div>         </div>  <div class="box"> <div class="trigger">hhh</div>       <div class="overlay animated">             <h1>box 1</h1>         </div>     </div>

js 

    <script type="text/javascript">         $("window").load(function(){             $("#body").removeclass("preload");         });              $(".trigger").hover(function(){                 var $this = $(this);                 $this.next(".overlay").removeclass("fadeindown", 1000).addclass("fadeinup", 1000);             });               $(".trigger").mouseleave(function(){                 var $this = $(this);                 $this.next(".overlay").removeclass("fadeinup", 1000).addclass("fadeindown", 1000);             });               $(".box").hover(function(){                 var $this = $(this);                 $this.next(".copy-bg").addclass("opacity");             });              $(".box").mouseleave(function(){                 var $this = $(this);                 $this.next(".copy-bg").removeclass("opacity");             });      </script>

css

.trigger{ width:100%; height: 100%; position: relative;  }   .box{ width: 300px; height: 300px; background: red;  @include inline-block; margin: 0 2px; position: relative; overflow: hidden;   }  .overlay{ height: 100%; width: 100%; bottom: -200px; position: absolute;  h1{     color: #fff; }   }   .copy-bg{ @include opacity(0.50); width: 100%; height: 100%; background: #000; position: absolute; display: none;    }  .opacity{ display: block;   }  .copy{ position: absolute; top: 0;    }    .animated{ @include transition-duration(1s ease); -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both;    }    .animated.hinge{ @include transition-duration(1s);    }   .fadeinup{ -webkit-transition: 1s ease; -moz-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; display: block;   }      .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes fadeinup { 0% {     opacity: 1;     -webkit-transform: translatey(0); }   100% {     opacity: 1;     -webkit-transform: translatey(-200px); }

}

      @-moz-keyframes fadeinup { 0% {     opacity: 1;     -moz-transform: translatey(20px); }  100% {     opacity: 1;     -moz-transform: translatey(0); }     }    @-o-keyframes fadeinup { 0% {     opacity: 1;     -o-transform: translatey(20px); }  100% {     opacity: 1;     -o-transform: translatey(0); }    }    @keyframes fadeinup { 0% {     opacity: 0;     transform: translatey(20px); }  100% {     opacity: 1;     transform: translatey(0); }   }  .fadeinup { -webkit-animation-name: fadeinup; -moz-animation-name: fadeinup; -o-animation-name: fadeinup; animation-name: fadeinup;  } @-webkit-keyframes fadeindown { 0% {     opacity: 1;     -webkit-transform: translatey(-200px); }  100% {     opacity: 1;     -webkit-transform: translatey(0); }    }    @-moz-keyframes fadeindown { 0% {     opacity: 0;     -moz-transform: translatey(-20px); }  100% {     opacity: 1;     -moz-transform: translatey(0); }     }     @-o-keyframes fadeindown { 0% {     opacity: 0;     -o-transform: translatey(-20px); }  100% {     opacity: 1;     -o-transform: translatey(0); }     }       @keyframes fadeindown { 0% {     opacity: 0;     transform: translatey(-20px); }  100% {     opacity: 1;     transform: translatey(0); }   }   .fadeindown { -webkit-animation-name: fadeindown; -moz-animation-name: fadeindown; -o-animation-name: fadeindown; animation-name: fadeindown;   }

as ca see copy-bg not next element of box, child

        $(".box").hover(function(){             var $this = $(this);             $this.children(".copy-bg").addclass("opacity");         });          $(".box").mouseleave(function(){             var $this = $(this);             $this.children(".copy-bg").removeclass("opacity");         });

Comments

Post a Comment

Popular posts from this blog

design - Custom Styling Qt Quick Controls -

-
Image
i have custom design qt quick controls. example, change background colour of tool bar, since hate default design. how can that? in qt quick controls, there limited styling available via qt quick control styles items, buttonstyle , checkboxstyle , etc. at moment, other styles require delving qt sources , messing internal details. here complete example of how 1 might modify toolbar's style. main.qml import qtquick 2.1 import qtquick.layouts 1.0 import qtquick.controls 1.0 applicationwindow { toolbar: toolbar { id: toolbar component.oncompleted: toolbar.data[0].item.children = [newrectangle]; property item _newrectangle: rectangle { // rectangle within toolbarstyle's panel // gleaned from: // http://qt.gitorious.org/qt/qtquickcontrols/source/ // c304d741a27b5822a35d1fb83f8f5e65719907ce:src/styles/base/toolbarstyle.qml id: newrectangle anchors.fill: parent...
Read more

Unable to remove the www from url on https using .htaccess -

-
i want remove www site url. ie. https://www.domainname.com.au https://domainname.com.au . i have tried various .htacces code nothing work me. here present code remove www http not work https. rewriteengine on rewritebase / rewritecond %{http_host} ^www\.(.*)$ [nc] rewriterule ^/(.*)$ http://%1/$1 [r=301,l] rewritecond %{https} off rewriterule ^(.*)$ https://domainname.com.au/$1 [r=301,l] rewriterule ^code-of-conducts/(.*)/$ code-of-conducts.php?type=$1 rewriterule ^parents/post-a-job/(.*)/edit/$ parents/post-a-job.php?action=edit&id=$1 rewriterule ^parents/post-a-job/(.*)/$ parents/post-a-job.php?job_type=$1 rewriterule ^parents/open-jobs/(.*)/delete/$ parents/open-jobs.php?action=delete&id=$1 rewriterule ^parent-profile/(.*)/$ parent-profile.php?id=$1 rewriterule ^parents/job-details/(.*)$ parents/job-details.php?applied_id=$1 rewriterule ^sitterprofile/(.*)/$ sitterprofile.php?id=$1 rewriterule ^sitter/job-board/state/(.*)/page/(.*)/$ sitter/job-board.ph...
Read more