क्या कोई मुझे यह दिखाने के लिए पूरा कोड लिख सकता है कि मैं सेन्चा टच 1 के साथ एचटीएमएल तत्व को कैसे फीका और फीका कर सकता हूं? विशेष रूप से, मुझे यह जानने की जरूरत है कि शामिल करने के लिए आवश्यक एचटीएमएल, जावास्क्रिप्ट और सीएसएस फाइलें क्या हैं।

मैंने div तत्व पर काम करने के लिए एक साधारण फीका प्रभाव प्राप्त करने के लिए हमेशा के लिए प्रयास किया है, लेकिन कोई सफलता नहीं मिली है। या तो मुझे विधि मिलती है त्रुटियाँ नहीं मिलीं या कुछ नहीं होता। सेन्चा मंचों पर मेरे सवालों का जवाब कोई नहीं दे रहा है। मुझे पूरा यकीन है कि मुझे कुछ स्पष्ट याद आ रहा है।

अतिरिक्त नोट

यहां वे चीजें हैं जिन्हें मैंने आजमाया और वे असफल क्यों हुईं:

<!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>
4
John 23 फरवरी 2012, 17:16

3 जवाब

सबसे बढ़िया उत्तर

हेयर यू गो:

          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
                    });
                }
            });

स्वतः साफ़ विशेषताएँ लुप्त होने के बाद बटन को छिपा कर रखेंगी

5
Titouan de Bailleul 23 फरवरी 2012, 17:33

यहाँ समृद्धि के लिए एक साथ फीके और फीके पड़ने की एक बेला है।

यह एक पूर्ण लेआउट वाले कंटेनर का उपयोग करता है।

http://jsfiddle.net/R6cgc/13/

var into = Ext.create('Ext.Container', {
    width: 440,
    itemId: 'animTo',
    layout: {
        type: 'absolute'
    },
    style: {
        backgroundColor: '#000',
        padding: '20px'
    },
    renderTo: Ext.getBody()           
});

var one = Ext.create('Ext.Component', {
    width: 360,
    height: 100,
    x: 0,
    y: 0,
    itemId: 'one',
    style: {
        backgroundColor: 'green'
    }   
});

var two = Ext.create('Ext.Component', {
    width: 360,
    height: 500,
    x: 0,
    y: 0,
    itemId: 'two',
    style: {
        backgroundColor: 'red',
        opacity: 0
    }      
});


into.add(one);
into.add(two);
into.getEl().setHeight(two.getEl().getHeight() + 40);
two.hide();
var current = one;

Ext.create('Ext.button.Button', {
    text: 'Fade',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            current.getEl().fadeOut({ duration: 2000});
            current = current == one ? two : one;
            current.getEl().fadeIn({ duration: 2000});
        }
    }
});
2
jenson-button-event 22 अप्रैल 2014, 15:24

ठीक है, मैंने आखिरकार इसका पता लगा लिया। जैसा कि TDeBailleul बताते हैं, स्वत: क्लियर लुप्त होने के बाद तत्वों को छिपा कर रखता है। यहाँ एक और उदाहरण है

उदाहरण: फ़ेड इन

<!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.Anim.run(Ext.get('mydiv'), 'fade', {out:false, duration:1000, autoClear:false});
      }
    });
    </script>
</head>
<body><div id="mydiv" style="opacity:0;">hello world</div></body>
</html>

उदाहरण: फीका पड़ना

<!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.Anim.run(Ext.get('mydiv'), 'fade', {out:true, duration:1000, autoClear:false});

      }
    });
    </script>
</head>
<body><div id="mydiv">hello world</div></body>
</html>
1
John 23 फरवरी 2012, 17:50