javascript - How to slide an element of a Slider by Jquery -


i trying give slide effect slider elements jquery. trying slide h3 left direction, p right direction on slider. default has fade effect, trying give slide effect h3 , p, not thumbnails.

html:

<span class="content-margin"> <p>this p: famously orated against...</p> <h3><a href="#">h3: download here premium templates</a></h3> </span>

js:

$('#headslide ul').cycle({ timeout: 4000, pager: '#headslide .pager',  after: function(currslideelement, nextslideelement, options, forwardflag){ $(nextslideelement).find("p" ).hide();                $(nextslideelement).find("p" ).toggle("slide");        return false;  }});

i hide/slide "p" elements callback , slide, not left/right.
please see slider fiddle >>

how slide h3 left , p right?

thanks in advance.

demo here

add below styles respective p , h3 a

#headslide p {     margin-left: 350px;     width: 100%;     opacity: 0;     display:block !important; }  #headslide h3 {     margin-left: -350px;     width: 100%;     opacity: 0;     display:block !important; }

and js animate:

$(nextslideelement).find("p" ).animate({      'opacity':'1',//change opacity      'marginleft': '-=350px' //change marginleft 0px deducting -350px },1000,function(){ //amimate 1 second duration      settimeout(function(){ //set timeout of second           $(nextslideelement).find("p").animate({               'marginleft':'+=350px',               'opacity':'0'            });      },3000) });          $(nextslideelement).find("h3 a" ).animate({      'opacity':'1',      'marginleft': '+=350px' },1000,function(){       settimeout(function(){            $(nextslideelement).find("h3 a").animate({                 'marginleft':'-=350px',                 'opacity':'0'            });       },3000) });

the above 1 second , 3 seconds = total 4 seconds match 4 second slideshow animation


Comments

Post a Comment

Popular posts from this blog

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

php - Bypass Geo Redirect for specific directories -

i'm trying bypass redirect specific url within site. wondering if might able help. the code below code use, original urls replaces example.com i'd able access http://example.com/admin without redirect occuring. is there way this, , there way using own ip? function country_geo_redirect() { $country = getenv('http_geoip_country_code'); if ($country == "us" ) { wp_redirect("http://usa.example.com/"); exit; } else if ($country == "gb" ) { wp_redirect("http://uk.example.com/"); exit; } } add_action('init', 'country_geo_redirect'); you can bypass redirection code if server found ip address. if ip address == <my ip address> ' nothing here else country_georedirect() end if
Read more

php - .htaccess mod_rewrite for dynamic url which has domain names -

i want convert url ex:( example.com/link.php?url=facebook.com ) ( example.com/facebook.com.php ) how can using .htaccess. or there other process make job easier ? i tried adding script .htaccess file options +followsymlinks rewriteengine on rewriterule url-(.*)\.htm$ link.php?url=$1 but converting url adding "url-" ( example.com/url-facebook.com.php ) i want remove "url-" , want make ( example.com/facebook.com.php ) rewriteengine on rewritecond %{the_request} ^get.*link\.php\?url\= [nc] rewritecond %{request_uri} !/system/.* [nc] rewriterule (.*?)link\.php\?url\=/*(.*) /$1$2 [r=301,ne,l] not sure how above work edit of used use remove index.php url
Read more