I have this function that (on page load) changes my margin using the "css" jQuery method...
function page_change() {
var h = window.location.hash;
switch (h) {
case 'home':
$('.page-slide-box').css({marginLeft: 0});
break;
case 'history':
$('.page-slide-box').css({marginLeft: '-820px'});
break;
// more cases here.....
}
}
...but after the page is loaded, I'd like to animate the change instead. I was thinking I could alter the existing function using replace() (rather than writing another redundant function), like so:
window.onhashchange = function() {
var get = page_change.toString();
var change = get.replace(/css/g, 'animate');
page_change();
}
This successfully changes all instances of "css" to "animate" in my page_change() function. How do I get this function to change dynamically once I've replaced the strings? Or is this just a bad idea?
In your example, I'd say this is a terrible idea. Why not simply define 1 function that can do both, and use it accordingly:
var page_change = function(e)
{
var method = e instanceof Event ? 'animate' : 'css';
switch (location.hash)
{
case 'home':
$('.page-slide-box')[method]({marginLeft: 0});
break;
//and so on...
}
};
call this function directly, and it'll set the css, use it like so:
window.onhaschange = page_change;
and it'll animate
instead of use the css
method. Easy
If you want to test this easily, you could try this:
var page_change = function(e)
{
var method = e instanceof Event ? 'animate' : 'css';
console.log(method);
};
document.body.onclick = page_change;
page_change();//logs css
//click the body and...
//animate will be logged
That's, basically, how this works.
The added benefit of defining a function like this (anonymous function, assigned to a variable or referenced by a var) is that you can easily assign a new function to that same variable:
var myFunc = function(){ console.log('foo');};
myFunc();//logs foo
myFunc = function(){console.log('bar')};
myFunc();//logs bar
This might work for you, too... of course. You can even store the old function:
var myFunc = function(){ console.log('foo');};
myFunc();//logs foo
var oldMyFunc = myFunc;
myFunc = function(){console.log('bar')};
myFunc();//logs bar
oldMyFunc();//logs foo
Play around with this for a while, to find the approach that fits your needs best (it could well be a combination of the things I talked about in this answer)
你仍然需要创建一个new Function()
,主体是被替换的css
的主体,所以只需编写另一个函数,你可以在其中放置延迟和回调以及animate()
所需的一切。
Assign a boolean to reflect the page load state (say loadstatus
), and use it to determine the action. You can use bracket notation to trigger the right action:
function page_change() {
var h = window.location.hash,
action = loadstatus ? 'animate' : 'css';
// ^ set loadstatus to true after page load.
switch (h) {
case 'home':
$('.page-slide-box')[action]({marginLeft: 0});
// ^ action used here
break;
case 'history':
$('.page-slide-box')[action]({marginLeft: '-820px'});
break;
// more cases here.....
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.