Page 2 of 2 FirstFirst 12
Results 11 to 18 of 18

Thread: Fade in/fade out on mouse over acting strange

  1. #11
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
      0  

    Default

    I suppose you're refering to this line:

    Code:
    img = e.getTarget.child('img');
    Didn't catch that earlier. The closest I get is this:

    Code:
    img = e.getTarget(false,false,true).child('img'); //getTarget() alone returns the DOM element
    But in that scenario, img is logged as null. What I'm I missing?

  2. #12
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    60
      0  

    Default

    OK, I made another mistake!

    The Element.down() and Element.child() methods have swapped places in 4.0

    down() means find a descendant node at any depth, child() means an immediate child. So you in fact need down('img')
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #13
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
      0  

    Default

    It happens

    But, even with the modified code, we're kind of back at the beginning:

    Code:
    var img;
        Ext.select('.options').on('mouseenter', function(e){
            img = e.getTarget(false,false,true).down('img');
            console.log(img);
            if(img != null){
                img.setOpacity(1, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        }).on('mouseleave', function(e){
            if(img != null){
                img.setOpacity(0, {
                    duration: 500,
                    easing: 'easeIn',
                });
            }
        });
    This code works, but if I mouse over the a-wrapped img tag, it fades away.

  4. #14
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    60
      0  

    Default

    I added this code to the end of the setup function in examples/view/data-view.js

    Code:
        var img;
        p.body.on('mouseenter', function(e){
            img = Ext.fly(e.getTarget()).down('img');
            img.animate({
                to: {
                    opacity: 1
                }
            });
        }).on('mouseleave',function(){
            img.animate({
                to: {
                    opacity: 0
                }
            });
        });
    (I assigned the new Panel to the var p in the previous statement of course!)

    And then mouseleave the Panel fades the first image out. Mouseentering it fades it in again.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  5. #15
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
      0  

    Default

    Yup, works like a charm!


    Thank you very much.

  6. #16
    Ext JS Premium Member
    Join Date
    Sep 2010
    Location
    Jyderup, Denmark
    Posts
    51
    Vote Rating
    0
      0  

    Default

    I did some more testing and it looks like things aren't entirely as they should be in your example.

    If I load the DataView example with your modifications to the code and then mouseenter the panel from outside the the bottom left corner and onto fx. zacks_grill.jpg, I get an "img is null" error.

    Same thing happens if I just randomly move the mouse over the images in the example.

    Sometimes, it'll fade away the image that I mouseenter together with the Ext.fly(e.getTarget()).down('img'); image.

    Is that still due to a bug or is it the code that select the image that needs to be adjusted?

  7. #17
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    60
      0  

    Default

    That's just that example. If you mouseenter quickly enough, the target of the mouseover (mouseenter is a fake event triggered by a DOM mouseover event) will be the image, and so .down('img') from there won't get anything.

    I suppose it should test whether the target is an img, and only go down into it to look for an img if it is not.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  8. #18
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,644
    Vote Rating
    60
      0  

    Default

    So maybe

    Code:
        var img;
        p.body.on('mouseenter', function(e){
            var t = e.getTarget();
            img = t.tagName.toLowerCase() === 'img' ? Ext.get(t) : Ext.fly(t).down('img');
            img.animate({
                to: {
                    opacity: 1
                }
            });
        }).on('mouseleave',function(){
            img.animate({
                to: {
                    opacity: 0
                }
            });
        });
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

Page 2 of 2 FirstFirst 12

Similar Threads

  1. How to fade in a window
    By jaques in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 2 Jul 2010, 12:20 PM
  2. FX fade in IE8
    By pkli in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 4 Apr 2010, 1:01 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •