jquery - Do same thing onclick and click outside an element -
i have 3 elements same class on page , when click on 1 should change opacity of images, have animation towards , backwards , hide 2 other elements etc. when click outside them should same thing.
what i've got far is, works fine don't know how works when click again on same class element works fine when click outside.
$(document).ready(function(){ var tipclick = $('.tip'); var did = $(tipclick).attr('data-id'); var activetip = $('.tip.active').attr('data-id'); $(tipclick).on('click', function(e){ $("#homepage .homepage-cnt.l .main.img .m").toggleclass("op").fadeto( 0, 0.2 ); $(".main.img").toggleclass(did); $(this).toggleclass('active'); $(".clone .n").show(); $(".tip svg").css({ '-webkit-animation' : 'spin .3s forwards', '-moz-animation' : 'spin .3s forwards', 'animation' : 'spin .3s forwards' }); e.preventdefault(); }); $(document).click(function(){ $("#homepage .homepage-cnt.l .main.img .m").removeclass('op').fadeto( 1000, 1 ); $(".clone .n").hide(); $(".clone").removeclass("art-t-r"); $(".clone").removeclass("art-m-l"); $(".clone").removeclass("art-b-l"); $(".tip.t-r").fadein(500); $(".tip.m-l").fadein(500); $(".tip.b-l").fadein(500); $(".art").fadeout(100); $(".tip svg").css({ '-webkit-animation' : 'spinback .3s backwards', '-moz-animation' : 'spinback .3s backwards', 'animation' : 'spinback .3s backwards' }); }); });
i totally stuck there, appreciated.
Comments
Post a Comment