Menu
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>
773
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
197
Here for prosperity is a fiddle of a concurrent fade in and fade out.
It uses a container with an absolute layout.
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});
}
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
