Attempting to make initials fade and slide out upon mouseover using jQuery

Question

Attempting to make initials fade and slide out upon mouseover using jQuery

I've been experimenting with jQuery to create a unique effect where hovering over my initials in the header expands the containing div and reveals my full name letter by letter. However, I'm facing some challenges and could use some guidance on the best approach.

My current strategy involves dividing my initials "OW" into separate divs, with the letters "wen" and "illiams" placed between them. Here's how it looks:


        <div class="initialF inlinediv">O</div>
        <div class="fullF inlinediv">wen</div>
        <div class="initialL inlinediv">W</div>
        <div class="fullL inlinediv">illiams</div>

I initially attempted to use jQuery slideLeft and .fadeIn methods for the animation, but encountered issues with the text jumping around and not smoothly transitioning. The mouseIn/Out events triggering the animations are defined as follows:


        <script>
            $(".brand").mouseenter(function() {
                $('.brand').animate({width: '160px'});
                $('.fullF').fadeIn("slow");
            });

            $(".brand").mouseout(function() {
                $('.brand').animate({width: '36px'});
                $('.fullF').fadeOut("slow");
            });
        </script>

I also tried using jquery.lettering.js, but ran into some complications. Any suggestions or tips to guide me in the right direction would be highly appreciated. You can check out my partially functional example on my site at the following link:

http://192.241.203.146/

javascript jquery html css

Answer 1

Answer №1

Here's a unique approach using CSS transitions instead of jQuery animation: http://jsfiddle.net/S58Se/2/

<div class='branding'>    
    <span class='initial'>O</span><span class='hidden nameFull wen'>wen</span>
    <span class='initial'>W</span><span class='hidden nameFull illiams'>illiams</span>
</div>

span {
    display: inline-block;
    overflow: hidden;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
}

.wen { width: 36px; }
.illiams { width: 160px; }

span.hidden {
    width: 0px;
    opacity: 0;
}

$('.branding').hover( 
    function() { $('.nameFull').removeClass('hidden'); },
    function() { $('.nameFull').addClass('hidden'); }
);

If you prefer to eliminate the JavaScript entirely, you can achieve the same effect with this method: http://jsfiddle.net/S58Se/3/ Simply remove the JS and incorporate these CSS rules:

.branding:hover .wen {
    width: 36px;
    opacity: 1;
}
.branding:hover .illiams {
    width: 160px;
    opacity: 1;
}

I find this alternative technique quite fascinating.

Answer 2

Here's a unique approach using CSS transitions instead of jQuery animation: http://jsfiddle.net/S58Se/2/

<div class='branding'>    
    <span class='initial'>O</span><span class='hidden nameFull wen'>wen</span>
    <span class='initial'>W</span><span class='hidden nameFull illiams'>illiams</span>
</div>

span {
    display: inline-block;
    overflow: hidden;
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
}

.wen { width: 36px; }
.illiams { width: 160px; }

span.hidden {
    width: 0px;
    opacity: 0;
}

$('.branding').hover( 
    function() { $('.nameFull').removeClass('hidden'); },
    function() { $('.nameFull').addClass('hidden'); }
);

If you prefer to eliminate the JavaScript entirely, you can achieve the same effect with this method: http://jsfiddle.net/S58Se/3/ Simply remove the JS and incorporate these CSS rules:

.branding:hover .wen {
    width: 36px;
    opacity: 1;
}
.branding:hover .illiams {
    width: 160px;
    opacity: 1;
}

I find this alternative technique quite fascinating.

Answer 3

Answer №2

An effective approach would be to enhance the functionality of your call to the animation method by including an additional property in the object being passed. Instead of invoking an extra method (fadeIn), you can handle everything in a single step:

$('.brand').on({
  'mouseenter' : function () {
    $('.nameFull').stop().animate({
      'width' : '200px',
      'opacity' : '1'
    }, 500);
  },
  'mouseleave' : function () {
    $('.nameFull').stop().animate({
      'width' : '0',
      'opacity' : '0'
    }, 500);
  }
});

I have also opted for using 'on' over 'hover', 'mouseenter', and 'mouseleave' methods. In the latest jQuery versions, these methods simply point to 'on', making it more efficient to consolidate everything in one place.

This may not align perfectly with your design, but I have created a Codepen demo showcasing the code: http://codepen.io/Tristan-zimmerman/pen/lnDGh

Answer 4

An effective approach would be to enhance the functionality of your call to the animation method by including an additional property in the object being passed. Instead of invoking an extra method (fadeIn), you can handle everything in a single step:

$('.brand').on({
  'mouseenter' : function () {
    $('.nameFull').stop().animate({
      'width' : '200px',
      'opacity' : '1'
    }, 500);
  },
  'mouseleave' : function () {
    $('.nameFull').stop().animate({
      'width' : '0',
      'opacity' : '0'
    }, 500);
  }
});

I have also opted for using 'on' over 'hover', 'mouseenter', and 'mouseleave' methods. In the latest jQuery versions, these methods simply point to 'on', making it more efficient to consolidate everything in one place.

This may not align perfectly with your design, but I have created a Codepen demo showcasing the code: http://codepen.io/Tristan-zimmerman/pen/lnDGh

Answer 5

Answer №3

To style the hidden divs, you can use position:absolute. When showing them, follow these steps:

Show them first to make them visible.
Position them next to your 'launching' div using jQuery.position().
Start the animation.

The purpose of setting them as 'absolute' is to prevent any disruptions in the existing flow when they appear or disappear. Remember to call position() after making the element visible and ensure you have the right conditions to initiate your animation effectively.

Alternatively, consider using <span> for the incoming text and/or displaying as inline-block to prevent any layout shifting issues. Hope this helps!

Answer 6

To style the hidden divs, you can use position:absolute. When showing them, follow these steps:

Show them first to make them visible.
Position them next to your 'launching' div using jQuery.position().
Start the animation.

The purpose of setting them as 'absolute' is to prevent any disruptions in the existing flow when they appear or disappear. Remember to call position() after making the element visible and ensure you have the right conditions to initiate your animation effectively.

Alternatively, consider using <span> for the incoming text and/or displaying as inline-block to prevent any layout shifting issues. Hope this helps!

Answer 7

Answer №4

If you need something similar to this, check out the following JSFiddle: JSFiddle

Here is the HTML code:

<div class="brand">
<div>O<span class="full">wen </span>W<span class="full">illiams</span></div>
</div>

jQuery code:

$('.brand').hover(function(){
    $(this).stop().animate({width: '160px'},'slow',function(){
        $(this).children('div').children('.full').stop().fadeIn('slow');
    }); 
},function(){
    $(this).children('div').children('.full').stop().fadeOut('slow',function(){
        $(this).parent().parent().stop().animate({width: '36px'},'slow');
    });
});

CSS code:

.full{
    display: none;
}

Please note that there may be a simple bug in a specific case which I am currently addressing.

Best regards,

Answer 8

If you need something similar to this, check out the following JSFiddle: JSFiddle

Here is the HTML code:

<div class="brand">
<div>O<span class="full">wen </span>W<span class="full">illiams</span></div>
</div>

jQuery code:

$('.brand').hover(function(){
    $(this).stop().animate({width: '160px'},'slow',function(){
        $(this).children('div').children('.full').stop().fadeIn('slow');
    }); 
},function(){
    $(this).children('div').children('.full').stop().fadeOut('slow',function(){
        $(this).parent().parent().stop().animate({width: '36px'},'slow');
    });
});

CSS code:

.full{
    display: none;
}

Please note that there may be a simple bug in a specific case which I am currently addressing.

Best regards,

Attempting to make initials fade and slide out upon mouseover using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Press the confirm button to halt the AJAX process

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

Connecting a picture to a web address using the <img class> tag

Script for automated functions

Error: The React Material-UI modal is encountering a type error where it cannot access the property 'hasOwnProperty' of an undefined value

Deselect all child elements when the parent checkbox is not selected

Tips for dynamically resizing an image to suit any screen size, such as with Bootstrap 4

Encountering an issue of duplicate key error when using multiple v-for loops with various keys

Looking for a way to trigger a function on JSTree's refresh event

Which HTTP headers pertain to the loading of iframes? nuxt-helmet

Tips on displaying a div for a brief moment and then concealing it

How does the PhoneGap API handle Timestamp format?

Extracting all usernames of members present in a specific voice channel and converting them into a string using Node.js on Discord

Modifying inner content without altering CSS styling

The functionality of the JavaScript Array Map function is not meeting our expectations

What could be the reason for the next.js Script tag not loading the third-party script when using the beforeInteractive strategy?

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

The process of incorporating types into Node.js and TypeScript for handling req and res objects

"Unexpected behavior: datatables.net plugin causing left menu to be hidden behind table in Internet

Populate an HTML layout with MySQL information and dynamically add the content to the page using JavaScript