Home/ Questions/Q 7547999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T09:35:58+00:00

Can someone write me the full code to show me how I can fade

  • 0

Can someone write me the full code to show me how I can fade in and fade out an html element with sencha touch 1? Specifically, I need to know what is the necessary html, javascript and css files to include.

I’ve tried forever to get a simple fade effect to work on a div element, but no success. Either I get method not found errors or nothing happens. No one is answering my questions on the sencha forums. I’m pretty sure i’m just missing something obvious.

Additional Notes

Here are things I tried and why they failed:

<!DOCTYPE html>
<html>
<head>
    <title>Nested List - Source Code Browser</title>
      <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript">
   Ext.setup({
      onReady: function() {

      //    Ext.get('mydiv').hide();
      //    Ext.get('mydiv').fadeOut(); // fadeOut() does not exist error
      //    Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true}); // does nothing
      //    Ext.Anim.run(Ext.getDom('mydiv'), 'fade', {out:true}); // does nothing
      }
    });
    </script>
</head>
<body><div id="mydiv">hello world</div></body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go:

              Ext.setup({
                onReady: function() {

                    var bool = true;

                    var button1 = new Ext.Button({
                        text:'Fade',
                        id:'button1',
                        handler: function(){
                            Ext.Anim.run(button2, 'fade', {
                                out: bool,
                                autoClear:false
                            });
                            bool = !bool;
                            console.log("fade end");
                        }
                      });

                    var button2 = new Ext.Button({
                        text:'Fade'
                    });

                    var toolbar = new Ext.Toolbar({
                        dock:'top',
                        title:'Fade',
                        items:[button1,{xtype:'spacer'},button2]
                    });

                    new Ext.Panel({
                        fullscreen: true,
                        dockedItems: toolbar
                    });
                }
            });

    The auto clear attributes will keep the button hidden after fading

    • 0