473,403 Members | 2,284 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,403 software developers and data experts.

stop/continue transitions in jQuery

How do I add a mouseover effect to stop the transitions and mouseout to continue?
Expand|Select|Wrap|Line Numbers
  1. /* =========================================================
  2.  
  3. // jquery.innerfade.js
  4.  
  5. // Datum: 2008-02-14
  6. // Firma: Medienfreunde Hofmann & Baldes GbR
  7. // Author: Torsten Baldes
  8. // Mail: t.baldes@medienfreunde.com
  9. // Web: http://medienfreunde.com
  10.  
  11. // based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
  12. // and Ralf S. Engelschall http://trainofthoughts.org/
  13.  
  14.  *
  15.  *  <ul id="news"> 
  16.  *      <li>content 1</li>
  17.  *      <li>content 2</li>
  18.  *      <li>content 3</li>
  19.  *  </ul>
  20.  *  
  21.  *  jqf('#news').innerfade({ 
  22.  *      animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'), 
  23.  *      speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'), 
  24.  *      timeout: Time between the fades in milliseconds (Default: '2000'), 
  25.  *      type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'), 
  26.  *    containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
  27.  *      runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
  28.  *      children: optional children selector (Default: null)
  29.  *  }); 
  30.  *
  31.  
  32. // ========================================================= */
  33.  
  34. (function(jqf) {
  35.  
  36.     jqf.fn.innerfade = function(options) {
  37.         return this.each(function() {   
  38.             jqf.innerfade(this, options);
  39.         });
  40.     };
  41.  
  42.     jqf.innerfade = function(container, options) {
  43.         var settings = {
  44.             'animationtype':    'fade',
  45.             'speed':            'normal',
  46.             'type':             'sequence',
  47.             'timeout':          2000,
  48.             'containerheight':  'auto',
  49.             'runningclass':     'innerfade',
  50.             'children':         null
  51.         };
  52.         if (options)
  53.             jqf.extend(settings, options);
  54.         if (settings.children === null)
  55.             var elements = jqf(container).children();
  56.         else
  57.             var elements = jqf(container).children(settings.children);
  58.         if (elements.length > 1) {
  59.             jqf(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
  60.             for (var i = 0; i < elements.length; i++) {
  61.                 jqf(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
  62.             };
  63.             if (settings.type == "sequence") {
  64.                 setTimeout(function() {
  65.                     jqf.innerfade.next(elements, settings, 1, 0);
  66.                 }, settings.timeout);
  67.                 jqf(elements[0]).show();
  68.             } else if (settings.type == "random") {
  69.                     var last = Math.floor ( Math.random () * ( elements.length ) );
  70.                 setTimeout(function() {
  71.                     do { 
  72.                                                 current = Math.floor ( Math.random ( ) * ( elements.length ) );
  73.                                         } while (last == current );             
  74.                                         jqf.innerfade.next(elements, settings, current, last);
  75.                 }, settings.timeout);
  76.                 jqf(elements[last]).show();
  77.                         } else if ( settings.type == 'random_start' ) {
  78.                                 settings.type = 'sequence';
  79.                                 var current = Math.floor ( Math.random () * ( elements.length ) );
  80.                                 setTimeout(function(){
  81.                                     jqf.innerfade.next(elements, settings, (current + 1) %  elements.length, current);
  82.                                 }, settings.timeout);
  83.                                 jqf(elements[current]).show();
  84.                         }    else {
  85.                             alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
  86.                         }
  87.                 }
  88.     };
  89.  
  90.     jqf.innerfade.next = function(elements, settings, current, last) {
  91.         if (settings.animationtype == 'slide') {
  92.             jqf(elements[last]).slideUp(settings.speed);
  93.             jqf(elements[current]).slideDown(settings.speed);
  94.         } else if (settings.animationtype == 'fade') {
  95.             jqf(elements[last]).fadeOut(settings.speed);
  96.             jqf(elements[current]).fadeIn(settings.speed, function() {
  97.                             removeFilter(jqf(this)[0]);
  98.                         });
  99.         } else
  100.             alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
  101.         if (settings.type == "sequence") {
  102.             if ((current + 1) < elements.length) {
  103.                 current = current + 1;
  104.                 last = current - 1;
  105.             } else {
  106.                 current = 0;
  107.                 last = elements.length - 1;
  108.             }
  109.         } else if (settings.type == "random") {
  110.             last = current;
  111.             while (current == last)
  112.                 current = Math.floor(Math.random() * elements.length);
  113.         } else
  114.             alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
  115.         setTimeout((function() {
  116.             jqf.innerfade.next(elements, settings, current, last);
  117.         }), settings.timeout);
  118.     };
  119.  
  120. })(jQuery);
  121.  
  122. // **** remove Opacity-Filter in ie ****
  123. function removeFilter(element) {
  124.     if(element.style.removeAttribute){
  125.         element.style.removeAttribute('filter');
  126.     }
  127. }
Mar 28 '11 #1
2 3151
dgreenhouse
250 Expert 100+
I haven't played with this in depth, but maybe you can glean something from this page.
http://www.openstudio.fr/Animated-In...y.html?lang=en

Look for the text: 'Example 2 : panoramic views'
Mar 28 '11 #2
Thanks dgreenhouse. Was looking at it but its not quite the desired result. I should let you know that I am a newbie to this stuff. I just really want it to stop when onmouseover and to continue the effect onmouseout.

Does this plugin have an in-built parameter or do I have to define some event code? Thanks for any help.
Mar 28 '11 #3

Sign in to post your reply or Sign up for a free account.

Similar topics

13
by: windandwaves | last post by:
Hi Folk Just a bit of help here for newbies who want their menus to look nicer. I am sure that many of you make menus like this <ul id="menu"> <li><a href="page1.html">option 1</a></li>...
1
by: ACaunter | last post by:
Hi there, I have an ASP.NET page with 4 imagebuttons on the left and 1 big image in the middle.. i need to get a mouseover effect which changes the big middle picture everytime the mouse rolls...
2
by: Bendik Engebretsen | last post by:
I'm an ASP newbie and have just started experimenting with ASP.NET 2.0 using the VS.NET 2005 Beta. As a starting point I have used the 'Personal WEB site' starter kit. I am now trying to figure...
2
by: Dariusz Tomon | last post by:
Hi I got task to make my application much more attractive :( First of all I have to add hover (mouseover) effect to several buttons - imagebuttons - I only know manner with Java Script - but it...
3
by: Annette Acquaire | last post by:
I have and image map with a dozen hotspot links on it that I'm trying to get to open a new image over existing one on mouseover of each COORD. The only thing I was able to do was swap image on...
2
by: Bundy | last post by:
Hi I cannot get the following rolling image script to pause when the mouse is over the image and then restart when no longer on the image. It continues to rotate the images. I have tried...
2
Steve Kiss
by: Steve Kiss | last post by:
Is there a way to add javascript functionality, onmouseover to be specific, to an image defined with <asp:Image />?
2
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the...
2
by: AndrewC | last post by:
I am using the Scriptaculous/Prototype libraries to build a project and I really want to have an effect like the mootools download page (http://www.mootools.net/download) where when you mouse over...
3
by: Torie Photgraph | last post by:
I am wondering if there is a css code that would enable a fade in/fade out image mouseover transparency? picture this: image is slightly transparent, mouseover: *FADE INTO* image mouseout: *FADE...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.